無論你是 JavaScript 的初學者還是專家，無論是為了求職面試還是日常開發(fā)工作，我們經(jīng)常會遇到這樣的情況：給出幾行代碼，我們需要知道它們的輸出內(nèi)容和順序。由于 JavaScript 是一種單線程語言，我們可以得出以下結論：

JavaScript 按照語句出現(xiàn)的順序執(zhí)行。

此時，讀者可能會說：我知道 JS 是一行一行執(zhí)行的，為什么還要特別指出呢？冷靜下來；正因為 JS 是一行一行執(zhí)行的，我們假設所有的 JS 都是這樣工作的：

let a = '1';
console.log(a);

let b = '2';
console.log(b);

然而，實際上 JS 是這樣的：

setTimeout(function(){
  console.log('定時器開始了')
});
new Promise(function(resolve){
  console.log('即將執(zhí)行for循環(huán)');
  for(var i = 0; i < 10000; i++){
    i == 99 && resolve();
  }
}).then(function(){
  console.log('執(zhí)行then函數(shù)')
});
console.log('代碼執(zhí)行結束');

遵循 JavaScript 按語句順序執(zhí)行的概念，我自信地寫下了輸出：

• 定時器開始了。
• 即將執(zhí)行for循環(huán)。
• 執(zhí)行then函數(shù)。
• 代碼執(zhí)行結束。

然而，在 Chrome 中驗證時，結果完全錯誤，瞬間迷惑，難道不是按約定的一行一行執(zhí)行的嗎？

我們需要徹底理解 JavaScript 的執(zhí)行機制。

關于 JavaScript

JavaScript 是一種單線程語言。盡管在最新的 HTML5 中引入了 Web Worker，但 JavaScript 的單線程核心沒有改變。因此，JavaScript 中的所有“多線程”都是使用單線程模擬的，所有的多線程都是欺騙性的！

JavaScript 事件循環(huán)

由于 JavaScript 是單線程的，就像只有一個窗口的銀行，客戶需要一個接一個地排隊辦理業(yè)務。同樣，JavaScript 任務也需要一個接一個地執(zhí)行。如果一個任務花費太長時間，那么下一個任務就必須等待。所以問題來了：如果我們想瀏覽新聞，但新聞中的高清圖片加載緩慢，我們的網(wǎng)頁是否必須一直卡住，直到圖片完全顯示？因此，聰明的程序員將任務分為兩類：

• 同步任務
• 異步任務

當我們打開一個網(wǎng)站時，網(wǎng)頁的渲染過程由一堆同步任務組成，如渲染頁面骨架和頁面元素。那些消耗資源多、耗時長的任務，如加載圖片或音樂文件，則是異步任務。為了簡化理解，我們使用思維導圖來說明這一點：

如果用文字描述思維導圖的內(nèi)容：

• 同步任務和異步任務進入不同的執(zhí)行“場所”，同步任務進入主線程，異步任務進入事件表并注冊函數(shù)。
• 當指定任務完成時，事件表會將這個函數(shù)移動到事件隊列中。
• 主線程中的任務執(zhí)行完畢后，會從事件隊列中讀取相應的函數(shù)并在主線程中執(zhí)行。
• 上述過程會不斷重復，這通常被稱為事件循環(huán)（Event Loop）。

我們不禁要問，如何知道主線程執(zhí)行棧是否為空？JavaScript 引擎有一個監(jiān)視過程，持續(xù)檢查主線程執(zhí)行棧是否為空。一旦為空，它就會去事件隊列中檢查是否有等待調(diào)用的函數(shù)。

經(jīng)過以上描述，一段代碼可能會更直觀：

let data = [];
$.ajax({
    url: 'www.javascript.com',
    data: data,
    success: () => {
        console.log('發(fā)送成功');
    }
})
console.log('代碼執(zhí)行結束');

上面是一段簡單的 ajax 請求代碼：

• ajax 進入事件表并注冊回調(diào)函數(shù) success。
• 執(zhí)行 console.log('代碼執(zhí)行結束')。
• ajax 事件完成，回調(diào)函數(shù) success 進入事件隊列。
• 主線程從事件隊列中讀取并執(zhí)行回調(diào)函數(shù) success。

通過以上的文字和代碼，相信你對 JavaScript 的執(zhí)行順序有了初步的了解。接下來，讓我們研究一個高級話題：setTimeout。

對 setTimeout 的愛恨情仇

眾所周知，setTimeout 無需過多介紹。我們對它的第一印象是它可以在延遲之后異步執(zhí)行。我們經(jīng)常使用它來實現(xiàn) 3 秒延遲執(zhí)行：

setTimeout(() => {
    task();
}, 3000)
console.log('執(zhí)行 console');

隨著 setTimeout 的使用逐漸增多，問題也隨之而來。有時，即使在代碼中指定了 3 秒的延遲，函數(shù)也會在 5 或 6 秒后執(zhí)行。這可能是什么原因造成的呢？

我們先看一個例子：

setTimeout(() => {
    task();
}, 3000)
console.log('執(zhí)行 console');

根據(jù)我們之前的結論，setTimeout 是異步的，所以同步任務 console.log 應該先執(zhí)行。因此，我們的結論是：

• 執(zhí)行 console
• task()

為了驗證，結果是正確的！然后讓我們對之前的代碼做一些修改：

setTimeout(() => {
    task();
}, 3000)

sleep(10000000)

乍一看，這似乎類似，但當我們在 Chrome 中執(zhí)行這段代碼時，發(fā)現(xiàn) console 的執(zhí)行時間遠遠超過 3 秒。為什么現(xiàn)在需要這么長時間呢？

此時，我們需要重新定義 setTimeout。讓我們來討論上面代碼的執(zhí)行過程：

• task() 進入事件表并注冊，計時開始。
• 執(zhí)行非常緩慢的 sleep 函數(shù)，計時繼續(xù)。
• 3 秒鐘過去，計時事件 timeout 完成。task() 進入事件隊列。但是，sleep 太慢，還沒有執(zhí)行完畢；所以我們必須等待。
• 最后，sleep 執(zhí)行完畢。task() 終于從事件隊列移動到主線程執(zhí)行。

經(jīng)過上述過程，我們了解到 setTimeout 函數(shù)會在指定時間后將任務（在這個例子中是 task()）添加到事件隊列中。由于任務在單線程環(huán)境中一個接一個地執(zhí)行，如果前面的任務執(zhí)行時間過長，執(zhí)行時間將顯著超過 3 秒。

我們經(jīng)常遇到類似 setTimeout(fn, 0) 的代碼。0 秒后執(zhí)行意味著什么？它能立即執(zhí)行嗎？

答案是否定的。setTimeout(fn, 0) 的意思是指定某個任務在主線程最早的空閑時間執(zhí)行，不需要等待任何額外的秒數(shù)，一旦所有同步任務在棧中完成并且棧變?yōu)榭铡＠纾?/p>

// 代碼 1
console.log('先執(zhí)行這里');
setTimeout(() => {
    console.log('執(zhí)行了')
}, 0);

// 代碼 2
console.log('先執(zhí)行這里');
setTimeout(() => {
    console.log('執(zhí)行了')
}, 3000);

代碼 1 的輸出結果是：

• 先執(zhí)行這里
• 執(zhí)行了

代碼 2 的輸出結果是：

• 先執(zhí)行這里
• ... 3 秒后
• 執(zhí)行了

關于 setTimeout 需要注意的是，即使主線程空閑，0 毫秒也無法實現(xiàn)。根據(jù) HTML 標準，最小值為 4 毫秒。感興趣的同學可以自行探索。

雙胞胎兄弟 setInterval

談到 setTimeout，我們不能錯過它的雙胞胎兄弟 setInterval。它們很相似，只不過后者是循環(huán)執(zhí)行的。從執(zhí)行順序來看，setInterval 會在每個指定的間隔時間將注冊的函數(shù)放入事件隊列。如果前一個任務花費太長時間，它也需要等待。

唯一需要注意的是，對于 setInterval(fn, ms)，我們已經(jīng)知道 fn 不會每 ms 秒執(zhí)行一次，而是在每 ms 秒將一個新的 fn 實例放入事件隊列。如果 setInterval 的回調(diào)函數(shù)（fn）花費的時間超過了延遲時間（ms），那么將不會有明顯的時間間隔。請仔細思考這句話。

Promise 和 process.nextTick(callback)

我們已經(jīng)研究了傳統(tǒng)的定時器，接下來，我們將探索 Promise 和 process.nextTick(callback) 的表現(xiàn)。

Promise 的定義和功能在本文中不會詳細展開。而 process.nextTick(callback) 類似于 Node.js 中的 “setTimeout”，在事件循環(huán)的下一輪調(diào)用回調(diào)函數(shù)。

切入正題，除了同步任務和異步任務的廣義定義外，我們還有更精細的任務定義：

• 宏任務（macro-task）：包括整體代碼、setTimeout、setInterval
• 微任務（micro-task）：Promise、process.nextTick

不同類型的任務將進入相應的事件隊列；例如，setTimeout 和 setInterval 將進入同一個事件隊列。

事件循環(huán)中的事件順序決定了 JavaScript 代碼的執(zhí)行順序。在進入整體代碼（宏任務）后，它開始其第一次循環(huán)。然后，它執(zhí)行所有的微任務。接下來，它再次從宏任務開始，直到一個任務隊列完成，再次執(zhí)行所有的微任務。聽起來有點復雜；讓我們用本文前面的一個代碼片段來說明：

setTimeout(function() {
    console.log('setTimeout');
})

new Promise(function(resolve) {
    console.log('promise');
}).then(function() {
    console.log('then');
})

console.log('console');

• 這段代碼作為宏任務進入主線程。
• 遇到 setTimeout，它的回調(diào)函數(shù)被注冊并分派到宏任務事件隊列中。
• 接下來，遇到 Promise，new Promise 立即執(zhí)行，并將 then 函數(shù)分派到微任務事件隊列中。
• 遇到 console.log()，立即執(zhí)行。
• 在作為第一個宏任務執(zhí)行整體代碼后，我們看看有哪些微任務。我們發(fā)現(xiàn) then 在微任務事件隊列中，并執(zhí)行它。
• 事件循環(huán)的第一輪結束。讓我們從宏任務事件隊列開始第二輪循環(huán)。我們發(fā)現(xiàn)這個隊列中對應于 setTimeout 的回調(diào)函數(shù)立即執(zhí)行。
• 結束

事件循環(huán)、宏任務和微任務之間的關系如圖所示：

我們分析一段更復雜的代碼，看看您是否理解了 JavaScript 的執(zhí)行機制：

console.log('1');

setTimeout(function() {
    console.log('2');
    process.nextTick(function() {
        console.log('3');
    })
    new Promise(function(resolve) {
        console.log('4');
        resolve();
    }).then(function() {
        console.log('5')
    })
})
process.nextTick(function() {
    console.log('6');
})
new Promise(function(resolve) {
    console.log('7');
    resolve();
}).then(function() {
    console.log('8')
})

setTimeout(function() {
    console.log('9');
    process.nextTick(function() {
        console.log('10');
    })
    new Promise(function(resolve) {
        console.log('11');
        resolve();
    }).then(function() {
        console.log('12')
    })
})

事件循環(huán)第一輪過程分析如下：

• 整體代碼作為第一個宏任務進入主線程，遇到 console.log 并輸出 1。
• 遇到 setTimeout，它的回調(diào)函數(shù)被分派到宏任務事件隊列中，我們暫時稱之為 setTimeout1。
• 遇到 process.nextTick()，它的回調(diào)函數(shù)被分派到微任務事件隊列中，我們稱之為 process1。
• 遇到 Promise，new Promise 直接執(zhí)行并輸出 7，then 方法分派到微任務事件隊列中，我們稱之為 then1。
• 再次遇到 setTimeout，它的回調(diào)函數(shù)被分派到宏任務事件隊列中，我們稱之為 setTimeout2。

• 在事件循環(huán)宏任務第一輪結束時，輸出 1 和 7。
• 我們發(fā)現(xiàn)兩個微任務：process1 和 then1。
• 執(zhí)行 process1 輸出 6。
• 執(zhí)行 then1 輸出 8。

第一輪事件循環(huán)正式結束，結果輸出為 1, 7, 6, 8。第二輪事件循環(huán)從 setTimeout1 宏任務開始：

• 首先，輸出 2。接下來，遇到 process.nextTick()，將其分派到微任務事件隊列中，標記為 process2。new Promise 立即執(zhí)行并輸出 4，然后分派到微任務事件隊列中，標記為 then2。

• 在第二輪事件循環(huán)宏任務結束后，我們發(fā)現(xiàn)有兩個微任務，process2 和 then2，可以執(zhí)行。
• 輸出 3。
• 輸出 5。
• 第二輪事件循環(huán)結束，輸出為 2, 4, 3, 5。
• 第三輪事件循環(huán)開始，此時只有 setTimeout2 剩下等待執(zhí)行。
• 直接輸出 9。
• 分派 process.nextTick() 到微任務事件隊列，標記為 process3。
• new Promise 直接執(zhí)行并輸出 11。
• 分派 then 到微任務事件隊列，標記為 then3。

• 第三輪事件循環(huán)宏任務執(zhí)行完成，執(zhí)行兩個微任務 process3 和 then3。
• 輸出 10。
• 輸出 12。
• 第三輪事件循環(huán)結束，輸出為 9, 11, 10, 12。

整個代碼段經(jīng)過了三輪事件循環(huán)，完整輸出為 1, 7, 6, 8, 2, 4, 3, 5, 9, 11, 10, 12。

在 Node 環(huán)境中的事件監(jiān)聽依賴于 libuv，與前端環(huán)境不完全相同，輸出順序可能會有差異。

總結

JavaScript 的異步性：從一開始，我們就說過 JavaScript 是單線程語言。無論使用什么新框架或語法糖來實現(xiàn)所謂的異步性，都是通過同步方法模擬的。牢牢把握單線程這一點非常重要。

事件循環(huán)：事件循環(huán)是 JavaScript 實現(xiàn)異步操作的方法，也是其執(zhí)行機制。

JavaScript 的執(zhí)行與運行：執(zhí)行和運行有很大區(qū)別。JavaScript 的執(zhí)行方式在不同環(huán)境中有所不同，如 Node.js、瀏覽器、Ringo 等。然而，運行大多指 JavaScript 解析引擎，保持一致。

setImmediate：有許多類型的微任務和宏任務，如 setImmediate 等，它們的執(zhí)行有共同點。感興趣的同學可以自行探索。

最后但同樣重要的是：JavaScript 是單線程語言，事件循環(huán)是其執(zhí)行機制。 牢牢掌握這兩個基本點，認真學習 JavaScript，很快實現(xiàn)成為優(yōu)秀前端開發(fā)者的偉大夢想！