如何玩轉JavaScript的事件循環

作者：zhoushx3 2016-09-06 21:23:25

聽多了JavaScript單線程，異步，V8，便會很想去知道JavaScript是如何利用單線程來實現所謂的異步的。我參考了一些文章，了解到一個很重要的詞匯：事件循環(Event Loop)。異步在JavaScript的重要性，也意味著理解Event Loop的必要性。

聽多了JavaScript單線程，異步，V8，便會很想去知道JavaScript是如何利用單線程來實現所謂的異步的。我參考了一些文章，了解到一個很重要的詞匯：事件循環(Event Loop)。在這些文章中，有：

阮一峰老師的JavaScript 運行機制詳解：再談Event Loop
Philip Roberts的What the heck is the event loop anyway?
Erin Swenson-Healey的The JavaScript Event Loop: Explained等。

這些文章都講得非常好，讓我對Event Loop的機制有了大概的了解。

異步在JavaScript的重要性，也意味著理解Event Loop的必要性，不然怎么敢輕易使用setTimeout和setInterval這些咧。

這里我還是通過翻譯一篇文章來解釋Event Loop，原文點這里Willson Mock：What is the JavaScript Event Loop?下邊的圖也都引用自這篇文章。

JavaScript Engine：JavaScript 引擎

截止到目前(原文編寫時間：5 July 2014)，在各種JavaScript 引擎的實現里邊，最出名的當屬Google Chrome的V8引擎了，既能在瀏覽器中使用，也能通過NodeJS在服務器端使用。但究竟JavaScript引擎是干什么用的?其實很簡單--它的任務就是遍歷應用中的每一行JavaScript代碼，并且一次執行一行，意味著JavaScript是單線程的。這里***的影響是：如果在JavaScript代碼中有地方會占用大量的時間，那后面的代碼都會被block住。

那么JavaScript引擎怎么知道如何一次處理一行JavaScript代碼?它使用的是一個調用棧call stack。你可以把調用棧比作電梯--***個進電梯的會***一個出電梯，***進電梯的會***出。

看個栗子：

/* Within main.js */ 
 
var firstFunction = function () {   
  console.log("I'm first!"); 
}; 
 
var secondFunction = function () {   
  firstFunction(); 
  console.log("I'm second!"); 
}; 
 
secondFunction(); 
 
/* Results: 
 * => I'm first! 
 * => I'm second! 
 */

下邊是調用棧的情況：

1.Main.js 執行

2.調用secondFunction

3.調用secondFunction引起調用firstFunction

4.執行firstFunction，輸出“I'm first!”，接著由于firstFunction執行完畢，firstFunction會從調用棧中彈出。

5.secondFunction繼續執行，輸出“I'm second!”。接著由于secondFunction執行完畢，secondFunction從調用棧中彈出。

6.***，main.js執行完畢，也從棧中彈出。

Event Loop：事件循環

了解了call stack在JavaScript引擎中是如何工作了之后，來看下如何使用異步回調函數來避免blocking 代碼。(譯者注：回調函數有多種實現方式，最常見的有：在函數中使用函數作用參數etc。)setTimeout就是使用的回調函數。看個栗子：

/* Within main.js */ 
 
var firstFunction = function () {   
 console.log("I'm first!"); 
}; 
 
var secondFunction = function () {   
 setTimeout(firstFunction, 5000); 
 console.log("I'm second!"); 
}; 
 
secondFunction(); 
 
/* Results: 
 * => I'm second! 
 * (And 5 seconds later) 
 * => I'm first! 
 */

下邊模擬調用棧(在上個栗子的基礎上我們這次推前點)

1....

2.secondFunction調用setTimeout，setTimeout入棧：

3.setTimeout執行后，瀏覽器會把setTimeout的回調函數(在這個栗子中是firstFunction)放到Event Table中。Event Table 就是個注冊站：調用棧讓Event Table注冊一個函數，該函數會在5秒之后被調用。當指定的事情發生時，Event Table會將這個函數移到Event Queue。Event Queue其實就是個緩沖區域，這里的函數等著被調用并移到調用棧。

問題來了，什么時候函數會從Event Queue移到調用棧咧?JavaScript引擎依據一條規則：有一個monitoring process(不知翻譯成啥好)會持續不斷地檢查調用棧是否為空，一旦為空，它會檢查Event Queue里邊是否有等待被調用的函數。如果存在，它就會調用這個Queue中***個函數并將其移到調用棧中。如果Event Queue為空，那么這個monitoring process會繼續不定期的檢查。這一整個過程就是Event Loop。