1.什么是异步
解释这个问题的时候，需要跟同步进行对比理解。同步会阻塞代码执行，而异步不会阻塞。
1.1alert是同步
console.log(100);
alert(200);
console.log(300);
执行这三句代码的时候：
第一句直接执行，打印出100；
第二句是alert，执行的时候，窗口弹出200，这个时候，如果你不点击确认，那么后面的代码就无法继续执行，也就不会打印出300，只有在你点击确认之后，第三句才会执行。
所以说，alert会阻塞代码，所以alert是同步。
1.2setTimeout是异步
console.log(100);
setTimeout(function(){
console.log(200);
});
console.log(300);
执行第一行，打印100；
执行setTimeout后，传入setTimeout的函数会被暂存起来，不会立即执行（单线程的特点，不会同时干两件事）；
执行最后一行，打印300；
等所有程序执行完，处于空闲的时候，会立马查看有没有暂存起来要执行的；
发现暂存起来的setTimeout中的函数，无需等待时间，就立即过来执行。
（打印顺序：100 300 200）
以上解释过程，可以看出，setTimeout是异步，并不会阻塞程序进行，同时也解释了异步与单线程：
因为js是一个单线程语言，所以需要异步。
2.异步适合的场景（什么时候需要异步？）
在可能发生等待的情况，等待过程不能像alert一样阻塞程序运行，因此，所有的“等待情况”都需要异步。
（1）定时任务：setTimeout、setInterval;
参照上述setTimeout例子
（2）网络请求： ajax请求，动态 <img>加载；
console.log(start);
$.get('./data.json',function(data){
console.log(data);
})
console.log(end)
执行第一行打印start；
执行第二行，发送请求之后，等待请求回应，执行函数暂存起来；
执行第三行打印end；
所有程序执行完毕，空闲的时候，发现暂存函数，但此时是封禁的，因为请求还没回来；
请求回来之后，函数解禁，执行打印data。
（3）事件绑定。（可以执行多次）
console.log(start);
document.getElementById('btn').addEventListener('click',function(){
console.log(clicked);
})
console.log(end);
执行第一行代码，打印start；
执行第二行代码，是一个btn绑定点击事件，执行函数会暂存起来；
执行最后一行代码，打印end；
当点击btn的时候，暂存起来的执行函数解禁，打印出clicked;
3.一个关于setTimeout的例子
console.log(1);
setTimeout(function(){
console.log(2);
},0};
console.log(3);
setTimeout(function(){
console.log(4);
},1000};
console.log(5);
打印顺序：1 3 5 2 4
网友评论