前言

我們知道 js 是單線程執行的，那么異步的代碼 js 是怎么處理的呢？例如下面的代碼是如何進行輸出的：

console.log(1);setTimeout(function() { console.log(2);}, 0);new Promise(function(resolve) { console.log(3); resolve(Date.now());}).then(function() { console.log(4);});console.log(5);setTimeout(function() { new Promise(function(resolve) {  console.log(6);  resolve(Date.now()); }).then(function() {  console.log(7); });}, 0);

在不運行的情況可以先猜測下最終的輸出，然后展開我們要說的內容。

1. 宏任務與微任務

依據我們多年編寫 ajax 的經驗：js 應該是按照語句先后順序執行，在出現異步時，則發起異步請求后，接著往下執行，待異步結果返回后再接著執行。但他內部是怎樣管理這些執行任務的呢？

在 js 中，任務分為宏任務(macrotask)和微任務(microtask)，這兩個任務分別維護一個隊列，均采用先進先出的策略進行執行！同步執行的任務都在宏任務上執行。

宏任務主要有：script(整體代碼)、setTimeout、setInterval、I/O、UI 交互事件、postMessage、MessageChannel、setImmediate(Node.js 環境)。

微任務主要有：Promise.then、 MutationObserver、 process.nextTick(Node.js 環境)。

具體的操作步驟如下：

從宏任務的頭部取出一個任務執行； 執行過程中若遇到微任務則將其添加到微任務的隊列中； 宏任務執行完畢后，微任務的隊列中是否存在任務，若存在，則挨個兒出去執行，直到執行完畢； GUI 渲染； 回到步驟 1，直到宏任務執行完畢；

這 4 步構成了一個事件的循環檢測機制，即我們所稱的eventloop。

回到我們上面說的代碼：

console.log(1);setTimeout(function() { console.log(2);}, 0);new Promise(function(resolve) { console.log(3); resolve(Date.now());}).then(function() { console.log(4);});console.log(5);setTimeout(function() { new Promise(function(resolve) {  console.log(6);  resolve(Date.now()); }).then(function() {  console.log(7); });}, 0);

執行步驟如下：

執行 log(1)，輸出 1； 遇到 setTimeout，將回調的代碼 log(2)添加到宏任務中等待執行； 執行 console.log(3)，將 then 中的 log(4)添加到微任務中； 執行 log(5)，輸出 5； 遇到 setTimeout，將回調的代碼 log(6, 7)添加到宏任務中； 宏任務的一個任務執行完畢，查看微任務隊列中是否存在任務，存在一個微任務 log(4)（在步驟 3 中添加的），執行輸出 4； 取出下一個宏任務 log(2)執行，輸出 2； 宏任務的一個任務執行完畢，查看微任務隊列中是否存在任務，不存在； 取出下一個宏任務執行，執行 log(6)，將 then 中的 log(7)添加到微任務中； 宏任務執行完畢，存在一個微任務 log(7)（在步驟 9 中添加的），執行輸出 7；