JS运行机制

JS异步任务分类：

1. setTimeout和setInterval
2. DOM事件
3. ES6中的Promise
以上都属于异步任务

---

两个问题引出JS运行机制

题目1：

console.log(1);
setTimeout(function(){
    console.log(3);
},0);
console.log(2);
//1
//2
//3

同步任务与异步任务优先级

为什么会输出123而不是132呢？
注：延时参数0不代表立即执行，现在浏览器最小延时为4ms，以前是10ms，小于4ms都会以4ms延时处理
setTimeout属于异步任务，JS引擎会将异步任务挂起，优先执行同步任务，所有同步任务执行完毕后才会执行异步任务。

---

题目2：

for(var i = 0; i < 4; i++){
  setTimeout(function(){
    console.log(i);
  },0);
}
//4
//4
//4
//4

异步任务挂起时间执行时间

为什么会输出4个4而不是0123呢？
for循环（同步任务）完成后才会执行console.log(i)，而这时候i已经变为4，所以输出4个4。而let定义i则不出现这样的问题。

---

任务队列和Event Loop

首先看下图：

任务队列和Event Loop

1. 运行栈中遇到异步任务setTimeout会将异步任务放入定时器模块（当延时触发时定时器模块将任务放入任务队列中）。
2. 所有同步任务执行完成后会监听任务队列中是否有任务，如果有任务则再放入运行栈中执行。

这个过程就称之为Event Loop。
每种异步任务都有相对应的处理模块。

---

注2：只有同步任务执行完成后才会去读取任务队列中的任务。比如死循环前面有异步任务，但是异步任务依旧不会执行。

setTimeout(function(){
    console.log(3);
},0);
while(true){

}
console.log(2);

这里的3和2不会输出，因为while(同步任务)没有执行完成，所以不会读取任务队列中的任务。