前言
最近已经开始在老项目中使用ES6编写代码，从ES6原生的模块导入到方便的模板字符串、解构赋值都给开发页面带来了不一样的感觉。当然还有await,async的出现彻底解决了javascript异步事件模型带来的困扰，本文用图文来解释javascript事件循环中存在的各个任务队列，更进一步理解事件循环。（本文需要对js事件循环有一定基础）
Promise对象
这是一张js执行时示意图，上图中，主线程运行的时候，产生堆（heap）和栈（stack），栈中的代码调用各种外部API，它们在"任务队列"中加入各种事件（click，load，done）。只要栈中的代码执行完毕，主线程就会去读取"任务队列"，依次执行那些事件所对应的回调函数。 在ES5年代，我们要添加往任务队列里面添加事件回调，常用的手段就是setTimeout,ajax等 如这段代码，无论执行多少次，输出的结果一定是10，理由见图
var number = 10;
setTimeout(function(){// 加入任务队列里面的
number = 20;
})
console.log(num); //10
在es6中，加入了一个新的对象promise,使得我们可以使用promise将事件回调加入任务队列中，如
let number = 10;
new Promise((resolve)=>{
number = 30;
resolve();
})
.then(()=>{ // 加入任务队列里面的
number=20;
})
console.log(number); // 30
macrotask与microtask
刚才说到，一般情况，我们要往任务队列里面加入事件回调，一般可以通过setTimeout以及Promise对象的then方法，那么他们有什么区别呢?看一下下面的代码
var number = 10;
setTimeout(()=>{
number+=10; // 20+=10
console.log(number); //30
})
new Promise((resolve)=>resolve()).then(()=>{
number = 20;
console.log(number); // 20
})
setTimeout中的log以及then中的log分别会打印30以及20，无论调用多少次，promise中的then总是会先执行，把他们的执行顺序更换后也是一样的。
var number = 10;
new Promise((resolve)=>resolve()).then(()=>{
number = 20;
console.log(number); // 20
})
setTimeout(()=>{
number+=10; // 20+=10
console.log(number); //30
})
为什么会出现这样的现象？这就要从JS中两种不同的任务队列说起，我们知道，在事件循环中，当主线程任务栈执行完成后，会读取任务队列依次执行，任务队列在其中分为两种macrotask && microtask,这两种队列会因为不同的api来生成，具体如下
macrotasks: setTimeout setInterval setImmediate I/O UI渲染
microtasks: Promise process.nextTick Object.observe MutationObserver
那么，他们有什么区别呢？我们来看看一个完整的js执行流程
检查macrotask队列，选择其中最早加入（即最老的）的任务X，设置为“目前运行的任务”。如果任务X不存在，那么直接跳到步骤4。
运行任务X，即运行对应的回调函数。
设置“目前运行的任务”为null，从macrotask队列中移除任务X。
-
检查microtask队列：
- 选择其中最老的任务a，如果任务a不存在，直接结束microtask队列。
- 设置任务a为“目前运行的任务”，并执行。
- 设置“目前运行的任务”为null，从Microtask队列中移除任务a。
- 选择下一个最老的任务b，跳到步骤ii。
- 直到队列里没有剩余的任务，结束队列。 5.跳回步骤1，检查下一个macrotask任务。
如图：
上面是一次简单的事件循环的流程图，我们代入下面一段代码进行看看
<script>
var number = 10;
setTimeout(()=>{
number+=10; // 50+=10
console.log(number); //60
})
new Promise((resolve)=>resolve()).then(()=>{
number = 20;
console.log(number); // 20
new Promise(()=>resolve().then()=>{
number = 50;
console.log(number), //50
})
setTimeout(()=>{
number+=20; // 60+=20
consol.log(number) //80
})
})
</script>
- 用户执行script，整个script其实是一个macrotask,故执行里面的方法 移除（对应上面流程2）
- 发现setTimeout,放入下一个macrotask中 移除（对应上面流程2）
- 发现Promise.then,放入microtask中移除（对应上面流程2）
- 当前运行任务为null，移除（对应上面流程3）
- 检查microtask,发现存在promise回调 （对应上面任务4.i）
- 执行promise回调,发现promise,将其放入microtask,发现setTimeout,将其放入 另外一个macrotask中，这时候还存在2个未执行的macrotask （对应上面4.ii,4.iii）
- 执行下一个microtask,即number=50 （对应上面4.iiii）
- 发现没有microtask了，结束队列 （对应上面4.v）
- 执行下一个macrotask,即(number+=10;)
- 顺序执行，发现不存在microtask，返回第一步（对应上面的2，3，4，5）
- 执行下一个macrotask,即(number+=20;)
- 任务全部执行完成
