了解js运行机制——微任务与宏任务

由一道面试题引起的思考。

setTimeout(function() {
  console.log(4);
}, 0);

new Promise(function(reslove) {
  console.log(1);
  reslove();
}).then(function(data) {
  console.log(3);
});

console.log(2);
复制代码

会输出：1，2，3，4。咱们来想一下为何。

浏览器中的事件循环 eventLoop，分为同步执行栈和异步队列，首先会执行同步的任务，当同步任务执行完以后会从异步队列中取异步任务拿到同步执行栈中进行执行。

在取异步队列时，还会有一个区分，就是区分微任务和宏任务。

• microtask：微任务，优先级高，而且能够插队，不是先定义先执行。包括：promise 中的 then，observer，MutationObserver，setImmediate
• macrotask：宏任务，优先级低，先定义的先执行。包括：ajax，setTimeout，setInterval，事件绑定，postMessage，MessageChannel（用于消息通信）

由于微任务的优先级较高，因此会先将微任务的异步任务取出来进行执行，当微任务的任务都执行完毕以后，会将宏任务中的任务取出来执行。

咱们此次来看一下上面的题，promise 中是同步任务，promise 的 .then 中是异步任务，而且是微任务。使用 setTimeout 是宏任务，即便是延时为 0，也是宏任务。

因此上面的执行顺序就是先将 setTimeout 加入到异步队列的宏任务池中，而后执行 promise 中的console.log(1)，再将 promise 的.then 加到异步队列中微任务池中，再执行同步任务console.log(2)，当同步任务都执行完以后，去微任务中的任务，执行console.log(3)，微任务执行完以后取宏任务，执行console.log(4)。因此顺序就是：1，2，3，4。

扩展：

将这道面试题进行一些改造：

setTimeout(function() {
  console.log(4);
}, 0);

new Promise(function(reslove) {
  console.log(1);
  setTimeout(function() {
    reslove('done');
  }, 0);
  reslove('first');
}).then(function(data) {
  console.log(data);
});

console.log(2);
复制代码

这个时候就会输出：1，2，first，4，没有输出 done，有些人可能会想，应该输出 1，2，first，4，done，这个时候你就要知道，当使用 reslove 以后，promise 的状态就从 pedding 变成了 resolve，promise 的状态更改以后就不能再更改了，因此 reslove('done') 就不会执行了。

当咱们把 reslove('done') 改为 console.log('done') 的时候，他就会输出 1，2，first，4，done 了。

再作一个更复杂的变动：

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

new Promise(function(reslove) {
  console.log(2);
  reslove('p1');
  new Promise(function(reslove) {
    console.log(3);
    setTimeout(function() {
      reslove('setTimeout2');
      console.log(4);
    }, 0);
    reslove('p2');
  }).then(function(data) {
    console.log(data);
  });
  setTimeout(function() {
    reslove('setTimeout1');
    console.log(5);
  }, 0);
}).then(function(data) {
  console.log(data);
});

console.log(6);
复制代码

输出的结果是：2，3，6，p2，p1，1，4，5。

先执行同步的任务，new Promise 中的都是同步任务，因此先输出 2，3，6，而后再执行微任务的，微任务能够插队，因此并非先定义的 p1 先执行，并且先将 p2 执行，而后执行 p1，当微任务都执行完成以后，执行宏任务，宏任务依次输出 1，4，5，promise 的状态不能够变动，因此 setTimeout1 和 setTimeout2 不会输出。

阅读完后两部曲

1. 喜欢的小伙伴点个赞吧，感受对身边人有帮助的，麻烦动动手指，分享一下。很是感谢各位花时间阅读完，同时很感谢各位的点赞和分享。
2. 但愿各位关注一下个人公众号吧，新的文章第一时间发到公众号，公众号主要发一些我的随笔、读书笔记、还有一些技术热点和实时热点，而且还有很是吸引人的我我的自费抽奖活动哦~