本文原鏈接：https://cloud.tencent.com/developer/article/1106531
https://cloud.tencent.com/developer/article/1372207
先看段代碼：
console.log(1); setTimeout(function () { console.log(2); new Promise(function (resolve, reject) { console.log(3); resolve(); console.log(4); }).then(function () { console.log(5); }); }); function fn() { console.log(6); setTimeout(function () { console.log(7); }, 50); } new Promise(function (resolve, reject) { console.log(8); resolve(); console.log(9); }).then(function () { console.log(10); }); fn(); console.log(11); // 以下代碼需要在 node 環境中執行 process.nextTick(function () { console.log(12); }); setImmediate(function () { console.log(13); });
思考一下,能給出准確的輸出順序嗎？
下面我們一個一個的來了解 Event Loop 相關的知識點，最后再一步一步分析出本段代碼最后的輸出順序。
javascript 代碼運行分兩個階段：
1、預解析---把所有的函數定義提前，所有的變量聲明提前，變量的賦值不提前
2、執行---從上到下執行（按照js運行機制）
(1) JS為什么是單線程的?
JS最初被設計用在瀏覽器中,那么想象一下,如果瀏覽器中的JS是多線程的。
場景描述: 那么現在有2個線程,process1 process2,由於是多線程的JS,所以他們對同一個dom,同時進行操作 process1 刪除了該dom,而process2 編輯了該dom,同時下達2個矛盾的命令,瀏覽器究竟該如何執行呢?這樣想,JS為什么被設計成單線程應該就容易理解了吧。
(2) JS為什么需要異步?
場景描述: 如果JS中不存在異步,只能自上而下執行,如果上一行解析時間很長,那么下面的代碼就會被阻塞。 對於用戶而言,阻塞就意味着"卡死",這樣就導致了很差的用戶體驗 所以,JS中存在異步執行。
(3) JS單線程又是如何實現異步的呢?
既然JS是單線程的,只能在一條線程上執行,又是如何實現的異步呢?
是通過的事件循環(event loop),理解了event loop機制,就理解了JS的執行機制
JavaScript是單線程
首先我們先了解下進程和線程的概念和關系：
- 進程： 運行的程序就是一個進程，比如你正在運行的瀏覽器，它會有一個進程。
- 線程： 程序中獨立運行的代碼段。一個進程 由單個或多個 線程 組成，線程是負責執行代碼的。
我們都知道 JavaScript 是單線程的，那么既然有單線程就有多線程，首先看看單線程與多線程的區別：
- 單線程： 從頭執行到尾，一行一行執行，如果其中一行代碼報錯，那么剩下代碼將不再執行。同時容易代碼阻塞。
- 多線程： 代碼運行的環境不同，各線程獨立，互不影響，避免阻塞。
那為什么JavaScript是單線程的呢？
JavaScript 的單線程，與它的用途有關。作為瀏覽器腳本語言，JavaScript 的主要用途是與用戶互動，以及操作 DOM。這決定了它只能是單線程，否則會帶來很復雜的同步問題。比如，假定JavaScript同時有兩個線程，一個線程在某個 DOM 節點上添加內容，另一個線程刪除了這個節點，這時瀏覽器應該以哪個線程為准呢？
所以，為了避免復雜性，從一誕生，JavaScript 就是單線程，這已經成了這門語言的核心特征，將來也不會改變。
為了利用多核 CPU 的計算能力，HTML5 提出 Web Worker 標准，允許 JavaScript 腳本創建多個線程，但是子線程完全受主線程控制，且不得操作 DOM。所以，這個新標准並沒有改變 JavaScript 單線程的本質。
執行棧、任務隊列
上圖中，主線程運行的時候，產生堆（heap）和棧（stack），棧中的代碼調用各種外部API，它們在"任務隊列"中加入各種事件（DOM Event，ajax，setTimeout…）。只要棧中的代碼執行完畢，主線程就會去讀取任務隊列，依次執行那些事件所對應的回調函數。
堆（heap）：
對象被分配在一個堆中，即用以表示一個大部分非結構化的內存區域。
執行棧（stack）：
運行同步代碼。執行棧中的代碼（同步任務），總是在讀取"任務隊列"（異步任務）之前執行。
任務隊列（callback queue）：
"任務隊列"是一個事件的隊列（也可以理解成消息的隊列），IO設備完成一項任務，就在"任務隊列"中添加一個事件，表示相關的異步任務可以進入"執行棧"了。主線程讀取"任務隊列"，就是讀取里面有哪些事件。
"任務隊列"中的事件，除了IO設備的事件以外，還包括一些用戶產生的事件（比如鼠標點擊、頁面滾動等等）。只要指定過回調函數，這些事件發生時就會進入"任務隊列"，等待主線程讀取。
所謂"回調函數"（callback），就是那些會被主線程掛起來的代碼。異步任務必須指定回調函數，當主線程開始執行異步任務，就是執行對應的回調函數。
"任務隊列"是一個先進先出的數據結構，排在前面的事件，優先被主線程讀取。主線程的讀取過程基本上是自動的，只要執行棧一清空，"任務隊列"上第一位的事件就自動進入主線程。但是，由於存在后文提到的"定時器"功能，主線程首先要檢查一下執行時間，某些事件只有到了規定的時間，才能返回主線程。
同步任務、異步任務、宏任務、微任務
單線程就意味着，所有任務需要排隊，前一個任務結束，才會執行后一個任務。如果前一個任務耗時很長，后一個任務就不得不一直等着。
如果排隊是因為計算量大，CPU忙不過來，倒也算了，但是很多時候CPU是閑着的，因為IO設備（輸入輸出設備）很慢（比如Ajax操作從網絡讀取數據），不得不等着結果出來，再往下執行。
JavaScript語言的設計者意識到，這時主線程完全可以不管IO設備，掛起處於等待中的任務，先運行排在后面的任務。等到IO設備返回了結果，再回過頭，把掛起的任務繼續執行下去。
於是，廣義上將 JavaScript 所有任務可以分成兩種，一種是同步任務（synchronous），另一種是異步任務（asynchronous）。同步任務指的是，在主線程上排隊執行的任務，只有前一個任務執行完畢，才能執行后一個任務；異步任務指的是，不進入主線程、而進入"任務隊列"（task queue）的任務，只有"任務隊列"通知主線程，某個異步任務可以執行了，該任務才會進入主線程執行。
具體來說，異步執行的運行機制如下（同步執行也是如此，因為它可以被視為沒有異步任務的異步執行）：
（1）所有同步任務都在主線程上執行，形成一個"執行棧"（execution context stack）； （2）主線程之外，還存在一個"任務隊列"（task queue）。只要異步任務有了運行結果，就在"任務隊列"之中放置一個事件； （3）一旦"執行棧"中的所有同步任務執行完畢，系統就會取出"任務隊列"中事件所對應的回調函數進入"執行棧"，開始執行； （4）主線程不斷重復上面的第三步。
除了廣義上的定義，我們可以將任務進行更精細的定義，分為宏任務與微任務：
- 宏任務（macro-task）： 包括整體代碼script，setTimeout，setInterval，ajax，dom操作
- 微任務（micro-task）： Promise
JS的執行機制是
- 首先判斷JS是同步還是異步,同步就進入主線程,異步就進入event table
- 異步任務在event table中注冊函數,當滿足觸發條件后,被推入event queue
- 同步任務進入主線程后一直執行,直到主線程空閑時,才會去event queue中查看是否有可執行的異步任務,如果有就推入主線程中
以上三步循環執行,這就是event loop
具體來說，宏任務與微任務執行的運行機制如下：
（1）首先，將"執行棧"最開始的所有同步代碼(宏任務)執行完成； （2）檢查是否有微任務，如有則執行所有的微任務； （3）取出"任務隊列"中事件所對應的回調函數(宏任務)進入"執行棧"並執行完成； （4）再檢查是否有微任務，如有則執行所有的微任務； （5）主線程不斷重復上面的（3）（4）步。
以上兩種運行機制，主線程都從"任務隊列"中讀取事件，這個過程是循環不斷的，所以整個的這種運行機制又稱為 Event Loop（事件循環）。
setTimeout()、setInterval()
setTimeout() 和 setInterval() 這兩個函數，它們的內部運行機制完全一樣，區別在於前者指定的代碼是一次性執行，后者則為反復執行。
setTimeout() 和 setInterval() 產生的任務是 異步任務，也屬於 宏任務。
setTimeout() 接受兩個參數，第一個是回調函數，第二個是推遲執行的毫秒數。setInterval() 接受兩個參數，第一個是回調函數，第二個是反復執行的毫秒數。
如果將第二個參數設置為0或者不設置，意思 並不是立即執行，而是指定某個任務在主線程最早可得的空閑時間執行，也就是說，盡可能早得執行。它在"任務隊列"的尾部添加一個事件，因此要等到同步任務和"任務隊列"現有的事件都處理完，才會得到執行。
setTimeout(function(){},3000) 是異步任務,先被放入event table, 3秒之后才被推入event queue里，而event queue(事件隊列)里的任務，只有在主線程空閑時才會執行。
所以說，setTimeout() 和 setInterval() 第二個參數設置的時間並不是絕對的，它需要根據當前代碼最終執行的時間來確定的，簡單來說，如果當前代碼執行的時間（如執行200ms）超出了推遲執行（setTimeout(fn, 100)）或反復執行的時間（setInterval(fn, 100)），那么setTimeout(fn, 100) 和 setTimeout(fn, 0) 也就沒有區別了，setInterval(fn, 100) 和 setInterval(fn, 0) 也就沒有區別了。
Promise
Promise 相對來說就比較特殊了，在 new Promise() 中傳入的回調函數是會 立即執行 的，但是它的 then() 方法是在 執行棧之后，任務隊列之前 執行的，它屬於 微任務。
process.nextTick
process.nextTick 是 Node.js 提供的一個與"任務隊列"有關的方法，它產生的任務是放在 執行棧的尾部，並不屬於 宏任務 和 微任務，因此它的任務 總是發生在所有異步任務之前。
setImmediate
setImmediate 是 Node.js 提供的另一個與"任務隊列"有關的方法，它產生的任務追加到"任務隊列"的尾部，它和 setTimeout(fn, 0) 很像，但優先級都是 setTimeout 優先於 setImmediate。
有時候，setTimeout 的執行順序會在 setImmediate 的前面，有時候會在 setImmediate 的后面，這並不是 node.js 的 bug，這是因為雖然 setTimeout 第二個參數設置為0或者不設置，但是 setTimeout 源碼中，會指定一個具體的毫秒數（node為1ms，瀏覽器為4ms），而由於當前代碼執行時間受到執行環境的影響，執行時間有所起伏，如果當前執行的代碼小於這個指定的值時，setTimeout 還沒到推遲執行的時間，自然就先執行 setImmediate 了，如果當前執行的代碼超過這個指定的值時，setTimeout 就會先於 setImmediate 執行。
優先級
通過上面的介紹，我們就可以得出一個代碼執行的優先級：
同步代碼（宏任務） > process.nextTick > Promise（微任務）> setTimeout(fn)、setInterval(fn)（宏任務）> setImmediate（宏任務）> setTimeout(fn, time)、setInterval(fn, time)，其中time>0
代碼解析
回到開頭給出的代碼，我們來一步一步解析：
運行"執行棧"中的代碼：
console.log(1); // setTimeout(function () { // 作為宏任務，暫不執行，放到任務隊列中(1) // console.log(2); // // new Promise(function (resolve, reject) { // console.log(3); // resolve(); // console.log(4); // }).then(function () { // console.log(5); // }); // }); function fn() { console.log(6); //setTimeout(function () { // 作為宏任務，暫不執行，放到任務隊列中(3) // console.log(7); //}, 50); } new Promise(function (resolve, reject) { console.log(8); resolve(); console.log(9); }) // .then(function () { // 作為微任務，暫不執行 // console.log(10); // }); fn(); console.log(11); process.nextTick(function () { console.log(12); }); // setImmediate(function () { // 作為宏任務，暫不執行，放到任務隊列中(2) // console.log(13); // });
此時輸出為：1 8 9 6 11 12
運行微任務：
new Promise(function (resolve, reject) { // console.log(8); // 已執行 // resolve(); // 已執行 // console.log(9); // 已執行 }) .then(function () { console.log(10); });
此時輸出為：10
讀取"任務隊列"的回調函數到"執行棧"：
setTimeout(function () { console.log(2); new Promise(function (resolve, reject) { console.log(3); resolve(); console.log(4); }) //.then(function () { // 作為微任務，暫不執行 // console.log(5); //}); });
此時輸出為：2 3 4
再運行微任務：
setTimeout(function () { // console.log(2); // 已執行 new Promise(function (resolve, reject) { // console.log(3); // 已執行 // resolve(); // 已執行 // console.log(4); // 已執行 }) .then(function () { console.log(5); }); });
此時輸出為：5
再讀取"任務隊列"的回調函數到"執行棧"：
setImmediate(function () { console.log(13); });
此時輸出為：13
運行微任務：
無
再讀取"任務隊列"的回調函數到"執行棧"：
// function fn() { // 已執行
// console.log(6); // 已執行 setTimeout(function () { console.log(7); }, 50); // }
此時輸出為：7
運行微任務：
無
綜上，最終的輸出順序是：1 8 9 6 11 12 10 2 3 4 5 13 7
說明：
for循環一次碰到一個 setTimeout()，並不是馬上把setTimeout()拿到異步隊列中，而要等到一秒后，才將其放到任務隊列里面，一旦"執行棧"中的所有同步任務執行完畢（即for循環結束，此時i已經為5），系統就會讀取已經存放"任務隊列"的setTimeout()（有五個），於是答案是輸出5個5。
如果要輸出0~4，上面例題應該如何修改？
1. 將var變為let
2. 加個立即執行函數
3. 也可以通過這樣加閉包
在到達指定時間時，定時器就會將相應回調函數插入“任務隊列”尾部。這就是“定時器（timer）”功能。
關於定時器的重要補充：
定時器包括setTimeout與 setInterval 兩個方法。它們的第二個參數是指定其回調函數推遲/每隔多少毫秒數后執行。
對於第二個參數有以下需要注意的地方：當第二個參數缺省時，默認為 0；當指定的值小於 4 毫秒，則增加到 4ms(4ms 是 HTML5 標准指定的，對於 2010 年及之前的瀏覽器則是 10ms);也就是說至少需要4毫秒，該setTimeout()拿到任務隊列中。