一、什么时候需要异步:
1)在可能发生等待的情况
2)等待过程中不能像alert一样阻塞程序的时候
3)因此,所有的“等待的情况”都需要异步
一句话总结就是需要等待但是又不能阻塞程序的时候需要使用异步
二、前端使用异步的场景(下面这些场景都需要等待,但是在等待的过程中又不能阻塞程序,所以需要异步,异步的设计主要是因为javascript是一个单线程的语言,单线程只允许同时做一件事情,如果同时需要做多个,那其他的需要去旁边排队去):
1)定时任务:setTimeout,setInverval
2)网络请求:ajax请求,img图片的动态加载
3)事件绑定或者叫DOM事件,比如一个点击事件,我不知道它什么时候点,但是在它点击之前,我该干什么还是干什么。用addEventListener注册一个类型的事件的时候,浏览器会有一个单独的模块去接收这个东西,当事件被触发的时候,浏览器的某个模块,会把相应的函数扔到异步队列中,如果现在执行栈中是空的,就会直接执行这个函数。
4)ES6中的Promise
例子:onload
img图片的动态加载异步例子:
console.log("start");
var img=document.createElement_x_x_x_x("img");
img.onload=function(){
console.log("loaded");
}
img.src="/xxx.png";
console.log("end");
结果:先输出start 再输出end最后输出loaded
例子:事件绑定 addEventListener
console.log("start");
var btn1=document.getElementById("btn1");
btn1.addEventListener('click',function(){
console.log("clicked");
})
console.log("end");
结果先输出start再输出end点击按钮之后输出clicked,点击多少次输出多少次clicded
补充:定时器有两种类型:
1)一次性计时器
setTimeout()指定的延迟时间之后来执行代码
clearTimeout()取消setTimeout设置
setTimeout(function(){
console.log(2);
},1000);
var i=setTimeout(function(){
console.log(10);
},1000)
clearTimeout(i);//取消要执行的延时的代码块
2)间隔性触发计时器
setInterval()每隔指定的时间执行代码
clearInterval()取消setInterval()设置
var i=setInterval(function(){
console.log(10);
},1000)
clearInterval(i);//取消要执行的延时的代码块