JS异步和单线程——前端什么场景需要异步

一、什么时候需要异步：

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);//取消要执行的延时的代码块