資訊專(zhuān)欄INFORMATION COLUMN
摘要：事件循環(huán)了解了在引擎中是如何工作了之后，來(lái)看下如何使用異步回調(diào)函數(shù)來(lái)避免代碼。從回調(diào)函數(shù)被放入后秒鐘，把移到中。由于事件循環(huán)持續(xù)地監(jiān)測(cè)調(diào)用棧是否已空，此時(shí)它一注意到調(diào)用棧空了，就調(diào)用并創(chuàng)建一個(gè)新的調(diào)用棧。
聽(tīng)多了JavaScript單線程，異步，V8，便會(huì)很想去知道JavaScript是如何利用單線程來(lái)實(shí)現(xiàn)所謂的異步的。我參考了一些文章，了解到一個(gè)很重要的詞匯：事件循環(huán)(Event Loop)。在這些文章中，有：
阮一峰老師的JavaScript 運(yùn)行機(jī)制詳解：再談Event Loop
Philip Roberts的What the heck is the event loop anyway?
Erin Swenson-Healey的The JavaScript Event Loop: Explained等。
這些文章都講得非常好，讓我對(duì)Event Loop的機(jī)制有了大概的了解。
異步在JavaScript的重要性，也意味著理解Event Loop的必要性，不然怎么敢輕易使用setTimeout和setInterval這些咧。
這里我還是通過(guò)翻譯一篇文章來(lái)解釋Event Loop，原文點(diǎn)這里Willson Mock：What is the JavaScript Event Loop?下邊的圖也都引用自這篇文章。
截止到目前（原文編寫(xiě)時(shí)間：5 July 2014），在各種JavaScript 引擎的實(shí)現(xiàn)里邊，最出名的當(dāng)屬Google Chrome的V8引擎了，既能在瀏覽器中使用，也能通過(guò)NodeJS在服務(wù)器端使用。但究竟JavaScript引擎是干什么用的？其實(shí)很簡(jiǎn)單--它的任務(wù)就是遍歷應(yīng)用中的每一行JavaScript代碼，并且一次執(zhí)行一行，意味著JavaScript是單線程的。這里最大的影響是：如果在JavaScript代碼中有地方會(huì)占用大量的時(shí)間，那后面的代碼都會(huì)被block住。
那么JavaScript引擎怎么知道如何一次處理一行JavaScript代碼？它使用的是一個(gè)調(diào)用棧call stack。你可以把調(diào)用棧比作電梯--第一個(gè)進(jìn)電梯的會(huì)最后一個(gè)出電梯，最后進(jìn)電梯的會(huì)最先出。
看個(gè)栗子：
/* 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!
*/
下邊是調(diào)用棧的情況：
Main.js 執(zhí)行
調(diào)用secondFunction
調(diào)用secondFunction引起調(diào)用firstFunction
執(zhí)行firstFunction，輸出“I"m first!”，接著由于firstFunction執(zhí)行完畢，firstFunction會(huì)從調(diào)用棧中彈出。
secondFunction繼續(xù)執(zhí)行，輸出“I"m second!”。接著由于secondFunction執(zhí)行完畢，secondFunction從調(diào)用棧中彈出。
最后，main.js執(zhí)行完畢，也從棧中彈出。
了解了call stack在JavaScript引擎中是如何工作了之后，來(lái)看下如何使用異步回調(diào)函數(shù)來(lái)避免blocking 代碼。（譯者注：回調(diào)函數(shù)有多種實(shí)現(xiàn)方式，最常見(jiàn)的有：在函數(shù)中使用函數(shù)作用參數(shù)etc。）setTimeout就是使用的回調(diào)函數(shù)?？磦€(gè)栗子：
/* 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!
*/
下邊模擬調(diào)用棧（在上個(gè)栗子的基礎(chǔ)上我們這次推前點(diǎn)）
...
secondFunction調(diào)用setTimeout，setTimeout入棧：
setTimeout執(zhí)行后，瀏覽器會(huì)把setTimeout的回調(diào)函數(shù)(在這個(gè)栗子中是firstFunction)放到Event Table中。Event Table 就是個(gè)注冊(cè)站：調(diào)用棧讓Event Table注冊(cè)一個(gè)函數(shù)，該函數(shù)會(huì)在5秒之后被調(diào)用。當(dāng)指定的事情發(fā)生時(shí)，Event Table會(huì)將這個(gè)函數(shù)移到Event Queue。Event Queue其實(shí)就是個(gè)緩沖區(qū)域，這里的函數(shù)等著被調(diào)用并移到調(diào)用棧。
問(wèn)題來(lái)了，什么時(shí)候函數(shù)會(huì)從Event Queue移到調(diào)用棧咧？JavaScript引擎依據(jù)一條規(guī)則：有一個(gè)monitoring process（不知翻譯成啥好）會(huì)持續(xù)不斷地檢查調(diào)用棧是否為空，一旦為空，它會(huì)檢查Event Queue里邊是否有等待被調(diào)用的函數(shù)。如果存在，它就會(huì)調(diào)用這個(gè)Queue中第一個(gè)函數(shù)并將其移到調(diào)用棧中。如果Event Queue為空，那么這個(gè)monitoring process會(huì)繼續(xù)不定期的檢查。這一整個(gè)過(guò)程就是Event Loop。
一旦回調(diào)函數(shù)加入到Event表中，代碼不會(huì)被block住，瀏覽器不會(huì)等待5秒之后再繼續(xù)處理接下去的代碼，相反，瀏覽器繼續(xù)執(zhí)行secondFunction的下一行代碼，console.log。
在background，Event Table會(huì)持續(xù)地監(jiān)測(cè)是否有事件觸發(fā)，將函數(shù)移到Event Queue中。在這個(gè)栗子中，secondFunction執(zhí)行完畢，接著main.js也執(zhí)行完畢。
從回調(diào)函數(shù)被放入Event Table后5秒鐘，Event Table把firstFucntion移到Event Queue中。
由于事件循環(huán)持續(xù)地監(jiān)測(cè)調(diào)用棧是否已空，此時(shí)它一注意到調(diào)用?？樟耍驼{(diào)用firstFunction并創(chuàng)建一個(gè)新的調(diào)用棧。
一旦firstFunction執(zhí)行完畢，調(diào)用?？樟耍珽vent Table里也沒(méi)有注冊(cè)函數(shù)，Event Queue也為空。
雖然這樣的解釋掩蓋了實(shí)際JavaScript引擎、Event Table、Event Queue和Event Loop的具體實(shí)現(xiàn)細(xì)節(jié)，但是對(duì)于大部分人來(lái)說(shuō)，我們只需要對(duì)JavaScript執(zhí)行異步函數(shù)時(shí)會(huì)發(fā)生什么有個(gè)大概的了解即可。
（譯到此）
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/80310.html
摘要：譯文事件循環(huán)機(jī)制之宏任務(wù)微任務(wù)原文標(biāo)題這是一篇谷歌大神文章，寫(xiě)得非常精彩。為什么會(huì)出現(xiàn)這樣打印順序呢要理解這些你首先需要對(duì)事件循環(huán)機(jī)制處理宏任務(wù)和微任務(wù)的方式有了解。 譯文：JS事件循環(huán)機(jī)制（event loop）之宏任務(wù)、微任務(wù) 原文標(biāo)題：《Tasks, microtasks, queues and schedules》 這是一篇谷歌大神文章，寫(xiě)得非常精彩。譯者想借這次翻譯深入學(xué)習(xí)一...
摘要：如果當(dāng)前沒(méi)有事件也沒(méi)有定時(shí)器事件，則返回。相關(guān)資料關(guān)于的架構(gòu)及設(shè)計(jì)思路的事件討論了使用線程池異步運(yùn)行代碼。下一篇初窺事件機(jī)制的實(shí)現(xiàn)二中定時(shí)器的實(shí)現(xiàn) 在瀏覽器中，事件作為一個(gè)極為重要的機(jī)制，給予JavaScript響應(yīng)用戶操作與DOM變化的能力；在Node.js中，事件驅(qū)動(dòng)模型則是其高并發(fā)能力的基礎(chǔ)。 學(xué)習(xí)JavaScript也需要了解它的運(yùn)行平臺(tái)，為了更好的理解JavaScript的事...
摘要：階段有兩個(gè)主要功能也會(huì)執(zhí)行時(shí)間定時(shí)器到達(dá)期望時(shí)間的回調(diào)函數(shù)執(zhí)行事件循環(huán)列表里的函數(shù)當(dāng)進(jìn)入階段并且沒(méi)有其余的定時(shí)器，那么如果事件循環(huán)列表不為空，則迭代同步的執(zhí)行隊(duì)列中的函數(shù)。如果沒(méi)有，則等待回調(diào)函數(shù)進(jìn)入隊(duì)列并立即執(zhí)行。 Event Loop 本文以 Node.js 為例，講解 Event Loop 在 Node.js 的實(shí)現(xiàn)，原文，JavaScript 中的實(shí)現(xiàn)大同小異。 什么是 Eve...
摘要：的宿主最開(kāi)始本身就是瀏覽器，處理用戶的交互事件。既然是單線程的，那就意味著任務(wù)需要排隊(duì)，只有前一個(gè)任務(wù)執(zhí)行完畢，下一個(gè)任務(wù)才能開(kāi)始，于是就有了任務(wù)隊(duì)列。事件循環(huán)有兩種用于瀏覽上下文的事件循環(huán)和用于的事件循環(huán)。 最近看到Event Loop這個(gè)詞出現(xiàn)的頻率有點(diǎn)高，于是查閱各方資料在此記錄一下。 先不說(shuō)概念，我們來(lái)看段代碼： console.log(script start); setT...
摘要：瀏覽器與的異同，以及部分機(jī)制有人對(duì)部分迷惑，本身構(gòu)造函數(shù)是同步的，是異步。瀏覽器的的已全部分析完成，過(guò)程中引用阮一峰博客，知乎，部分文章內(nèi)容，侵刪。 瀏覽器與NodeJS的EventLoop異同，以及部分機(jī)制 PS：有人對(duì)promise部分迷惑，Promise本身構(gòu)造函數(shù)是同步的，.then是異步。---- 2018/7/6 22：35修改 javascript 是一門(mén)單線程的腳本...
閱讀 2592·2021-10-11 10:58
閱讀 1114·2019-08-29 13:58
閱讀 1715·2019-08-26 13:32
閱讀 883·2019-08-26 10:40
閱讀 3315·2019-08-26 10:18
閱讀 1807·2019-08-23 14:18
閱讀 1167·2019-08-23 10:54
閱讀 503·2019-08-22 18:39
