前言
最近已经开始在老项目中使用ES6编写代码,从ES6原生的模块导入到方便的模板字符串、解构赋值都给开发页面带来了不一样的感觉。当然还有await,async的出现彻底解决了javascript异步事件模型带来的困扰,本文用图文来解释javascript事件循环中存在的各个任务队列,更进一步理解事件循环。(本文需要对js事件循环有一定基础)
Promise对象
![aff94d81d14e2900487b160363b5e7ac.png](https://i-blog.csdnimg.cn/blog_migrate/3dc7f5134f1098c056c2c4112f4bc537.jpeg)
299425.png
这是一张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任务。
如图:
![a5db1fc353e819588ba95533bfcbe580.png](https://i-blog.csdnimg.cn/blog_migrate/90ba61d7aee68be893dec63adeac4c83.png)
v2-ad1a251cb91d37625185a4fb874494fc_hd.jpg
上面是一次简单的事件循环的流程图,我们代入下面一段代码进行看看
<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;)
- 任务全部执行完成
参考文章
HTML系列:macrotask和microtask