同步:按照顺序执行
异步:在当前任务等待执行的时候,执行下一个
- 定时器是异步编程的
- 所有的事件绑定是异步编程的
- ajax有异步编程
- 也有人把回调函数当作异步编程(有点牵强)
打个比方
//同步
var start = new Date;
for(var i=0;i<1000;i++){
if(i === 999){
console.log(i)
}
}
console.log(new Date() - start)
//异步
for(var i=0;i<3;i++){
setTimeout(function(){
console.log(i)
},(5-i)*10);
}
==> 2,2,2
我们主要解释为什么异步输出三个2
函数执行,会有个主任务队列执行同步函数,,当执行完祝任务之后,在执行等待任务队列;
- 第一次循环:主任务队列创建一个定时器,等待任务队列会有个ns之后执行的方法
- 同样第二轮循环...
- 当同步循环完之后,执行等待任务队列,此时等待任务队列已经到时间的方法会一次执行,输出i,
- 当前作用域没有i,需要向上级作用域查找,查到上一级的i已经循环完毕,i的值2,所以会执行3次定时器,输出三次2
那么我们知道,事件绑定也是异步编程 所以
for(var i=0;i<3;i++){
tab.onclick = function(){
console.log(i)
};
}
以上的方式为什么不可以用的原因已经不言而喻,那在真实项目中,我们怎么去应用这种异步呢,比如
var page1 = (function(){
return{
init:function(){
}
}
})();
page1.init();
var page2 = (function(){
return{
init:function(){
}
}
})();
setTimeout(page2.init(),0);
//setTimeout会在所有同步执行结果完成后,在执行,就算事件设置为0也不是立马执行,浏览器都有个最小反应时间(谷歌5-7是,ie 10-13s...)