盒子
盒子

event-loop 宏任务、微任务

javascript是单线程,就有了异步请求,回调队列,宏任务,微任务
以宏任务、微任务为出发点,理解事件循环


event-loop

宏任务:整段JavaScript代码、setTimeout、setInterval
微任务:promise、process.nextTick(callback)
事件循环中,每轮都先执行本轮的宏任务,在执行本轮代码中的微任务!是一个层层递进 ,先宏后微的顺序,如下例子:
1
2
3
4
5
6
7
8
9
10
11
setTimeout(function() {
console.log(1);
})
new Promise(function(resolve, reject) {
console.log(2);
resolve();
})
.then(function() {
console.log(3);
})
console.log(4);


以上代码中,整体是一个宏任务,从上往下,遇到setTimeout,是一个 异步宏任务,放到event table,由于延迟时间没有设置,立即将回掉函数放入event queue,接着,遇到new Promise代码,函数里面是同步任务,打印2,执行resolve,遇到then,由于then是异步微任务,放到micro queue中,再遇到同步代码,打印出4,至此本轮 宏任务执行完毕,接着,执行 本轮微任务,就是then里面的回掉函数,打印出3,至此,本轮事件循环执行完毕!执行下一轮的宏任务,直接打印1,由于第二轮的宏任务代码就只有setTimeout里面的回调函数,本轮没有微任务,本轮事件循环执行完毕!打印顺序:2,4,3,1
上面的例子还需要理解下面这张图:

event-loop


event-loop

参考文章

支持一下
扫一扫,支持 Alin
  • 微信扫一扫
  • 支付宝扫一扫