原文

使用像 JavaScript 這樣的語言進(jìn)行編程時，最重要但也經(jīng)常被誤解的部分之一是如何表達(dá)和操作一段需要某段時間才能完成執(zhí)行的程序行為。

這不僅僅是從 for 循環(huán)開始到 for 循環(huán)結(jié)束發(fā)生的事情，這當(dāng)然需要一些時間（微秒到毫秒）才能完成。它是關(guān)于當(dāng)你的程序的一部分現(xiàn)在運行而你的程序的另一部分稍后運行時會發(fā)生什么。在程序的兩部分分別得到執(zhí)行的時間間隙，存在著一個 gap.

實際上，所有編寫過的重要程序（尤其是用 JS 編寫的）都必須以某種方式管理這個 gap，無論是等待用戶輸入、從數(shù)據(jù)庫或文件系統(tǒng)請求數(shù)據(jù)、通過網(wǎng)絡(luò)發(fā)送數(shù)據(jù)以及等待響應(yīng)，或以固定的時間間隔執(zhí)行重復(fù)的任務(wù)（如動畫）。通過所有這些不同的方式，您的程序必須及時管理狀態(tài)。

異步編程從 JS 開始就已經(jīng)存在了，這是肯定的。但是大多數(shù) JS 開發(fā)人員從來沒有真正仔細(xì)考慮過它是如何以及為什么會出現(xiàn)在他們的程序中，或者探索各種其他方法來處理它。足夠好的方法一直是不起眼的回調(diào)函數(shù)。直到今天，許多人仍堅持認(rèn)為回調(diào)已綽綽有余。

但是隨著 JS 的范圍和復(fù)雜性不斷增長，為了滿足在瀏覽器和服務(wù)器以及介于兩者之間的所有可能的設(shè)備中運行的一流編程語言不斷擴大的需求，我們管理異步的痛苦正變得越來越嚴(yán)重，他們迫切需要更有能力和更合理的方法。

我們必須更深入地了解異步是什么以及它如何在 JS 中運行。

a program in chunks

你可以在一個 .js 文件中編寫你的 JS 程序，但你的程序幾乎肯定由幾個塊組成，其中只有一個現(xiàn)在要執(zhí)行，其余的將稍后執(zhí)行。 每個塊最常見的單位是函數(shù)。

大多數(shù)剛接觸 JS 的開發(fā)人員似乎都有的問題是，“l(fā)ater”不會嚴(yán)格地發(fā)生在“now”之后。 換句話說，根據(jù)定義，當(dāng)前無法完成的任務(wù)將異步完成，因此我們不會像您直觀地期望或想要的那樣有阻塞行為。

考慮：

// ajax(..) is some arbitrary Ajax function given by a library var data = ajax( "http://some.url.1" );console.log( data ); // Oops! `data` generally won't have the Ajax results

您可能知道標(biāo)準(zhǔn) Ajax 請求不是同步完成的，這意味著 ajax(…) 函數(shù)還沒有任何返回值以分配給 data 變量。 如果 ajax(…) 可以阻塞直到響應(yīng)回來，那么 data = … 賦值會正常工作。

但這不是我們使用 Ajax 的方式。 我們現(xiàn)在發(fā)出一個異步的 Ajax 請求，直到稍后我們才會得到結(jié)果。

從現(xiàn)在到以后“等待”的最簡單（但絕對不僅僅是，甚至最好！）方法是使用一個函數(shù)，通常稱為回調(diào)函數(shù)：

// ajax(..) is some arbitrary Ajax function given by a library ajax( "http://some.url.1", function myCallbackFunction(data){console.log( data ); // Yay, I gots me some `data`!} );

看這段代碼：

function now() {return 21; }function later() {answer = answer * 2;console.log( "Meaning of life:", answer ); }var answer = now();setTimeout( later, 1000 ); // Meaning of life: 42

這個程序有兩個部分：現(xiàn)在將運行的內(nèi)容和稍后運行的內(nèi)容。 這兩個塊是什么應(yīng)該很明顯。

現(xiàn)在立即執(zhí)行的代碼塊：

function now() {return 21; }function later() { .. }var answer = now();setTimeout( later, 1000 );

稍后異步執(zhí)行的代碼塊：

answer = answer * 2; console.log( "Meaning of life:", answer );

一旦您執(zhí)行程序， now 塊就會立即運行。 但是 setTimeout(…) 也會設(shè)置一個事件（超時）稍后發(fā)生，因此 later() 函數(shù)的內(nèi)容將在稍后的時間（從現(xiàn)在起 1,000 毫秒）執(zhí)行。

任何時候您將一部分代碼包裝到一個函數(shù)中并指定它應(yīng)該響應(yīng)某些事件（計時器、鼠標(biāo)單擊、Ajax 響應(yīng)等）而執(zhí)行時，您正在創(chuàng)建代碼的“l(fā)ater”部分，從而引入異步到你的程序。

Async Console

console.log 到底是同步輸出還是異步輸出？

沒有關(guān)于 console.* 方法如何工作的規(guī)范或一組要求——它們不是 JavaScript 的正式組成部分，而是由托管環(huán)境添加到 JS 中。

因此，不同的瀏覽器和 JS 環(huán)境有著各自的實現(xiàn)，這有時會導(dǎo)致混亂的行為。

特別是，有一些瀏覽器和一些條件，console.log(…) 實際上并沒有立即輸出它給出的內(nèi)容。 這可能發(fā)生的主要原因是因為 I/O 是許多程序（不僅僅是 JS）的一個非常緩慢和阻塞的部分。 因此，瀏覽器在后臺異步處理控制臺 I/O 可能會表現(xiàn)得更好（從頁面/UI 角度來看），而您甚至可能不知道發(fā)生了這種情況。

一個不太常見但可能的場景，可以觀察到這種情況（不是從代碼本身而是從外部）：

var a = {index: 1 };// later console.log( a ); // ??// even later a.index++;

我們通常希望在 console.log(…) 語句的確切時刻看到 a 對象被快照，打印類似 { index: 1 } 的內(nèi)容，這樣在 a.index++ 發(fā)生時的下一個語句中，它正在修改與 a. 的輸出不同的東西，或者完全不同的東西。

大多數(shù)情況下，前面的代碼可能會在您的開發(fā)人員工具的控制臺中生成您所期望的對象表示。但同樣的代碼可能會在瀏覽器認(rèn)為需要將控制臺 I/O 推遲到后臺的情況下運行，在這種情況下，當(dāng)對象在瀏覽器控制臺中表示時，a.index++已經(jīng)發(fā)生了，它顯示 { index: 2 }。

在什么條件下控制臺 I/O 將被推遲，甚至是否可以觀察到，這是一個不斷變化的目標(biāo)。請注意 I/O 中這種可能的異步性，以防您在調(diào)試中遇到問題，其中在 console.log(…) 語句之后修改了對象，但您看到意外的修改出現(xiàn)。

Event Loop

讓我們做出一個（也許令人震驚的）聲明：盡管您顯然能夠編寫異步 JS 代碼（例如我們剛剛看到的超時），但直到最近（ES6），JavaScript 本身實際上從未有任何內(nèi)置的異步的直接概念.

什么！？這似乎是一個瘋狂的主張，對吧？事實上，這是非常正確的。 JS 引擎本身從來沒有做過任何事情，只是在任何給定的時刻，在被要求時執(zhí)行你的程序的單個塊。

被誰要求執(zhí)行呢？這個問題很關(guān)鍵。

JS 引擎不是孤立運行的。它在托管環(huán)境中運行，對于大多數(shù)開發(fā)人員來說，這是典型的 Web 瀏覽器。在過去的幾年里（但絕不是唯一的），JS 通過 Node.js 之類的東西從瀏覽器擴展到其他環(huán)境，例如服務(wù)器。事實上，如今 JavaScript 被嵌入到各種設(shè)備中，從機器人到燈泡。

但是所有這些環(huán)境的一個共同“線程”是它們中有一種機制來處理隨著時間的推移來執(zhí)行多個程序塊，在每個時間點調(diào)用JS 引擎。這個線程稱為事件循環(huán)。

換句話說，JS 引擎并沒有與生俱來的時間感，而是一個任意 JS 片段的按需執(zhí)行環(huán)境。總是安排“事件”（即 JS 代碼執(zhí)行）的是執(zhí)行 JavaScript 代碼的托管環(huán)境。

因此，例如，當(dāng)您的 JS 程序發(fā)出 Ajax 請求以從服務(wù)器獲取一些數(shù)據(jù)時，您在函數(shù)中設(shè)置響應(yīng)代碼（通常稱為回調(diào)），JS 引擎告訴托管環(huán)境，“嘿，我現(xiàn)在將暫停執(zhí)行，但是每當(dāng)您完成該網(wǎng)絡(luò)請求并且您有一些數(shù)據(jù)時，請回調(diào)此函數(shù)。”

然后瀏覽器被設(shè)置為監(jiān)聽來自網(wǎng)絡(luò)的響應(yīng)，當(dāng)它有東西給你時，瀏覽器將回調(diào)函數(shù)插入到事件循環(huán)中，以此來調(diào)度回調(diào)函數(shù)的執(zhí)行。

那么什么是事件循環(huán)呢？

讓我們首先通過一些假代碼來概念化它。

事件循環(huán)(event loop)的邏輯可以用下面的偽代碼來表示：

// `eventLoop` is an array that acts as a queue // (first-in, first-out) var eventLoop = [ ]; var event;// keep going "forever" while (true) {// perform a "tick"if (eventLoop.length > 0) {// get the next event in the queueevent = eventLoop.shift();// now, execute the next eventtry {event();}catch (err) {reportError(err);}} }

當(dāng)然，這是為了說明概念而大大簡化的偽代碼。但這應(yīng)該足以幫助獲得更好的理解。

如您所見，while 循環(huán)代表了一個持續(xù)運行的循環(huán)，該循環(huán)的每次迭代稱為一個滴答。對于每個滴答聲，如果一個事件在隊列中等待，它就會被從隊列里摘下并執(zhí)行。這些事件是您的函數(shù)回調(diào)。

重要的是要注意 setTimeout(…) 不會將您的回調(diào)放在事件循環(huán)隊列中。它的作用是設(shè)置一個計時器；當(dāng)計時器到期時，環(huán)境會將您的回調(diào)放入事件循環(huán)中，以便將來某個滴答聲將其拾取并執(zhí)行。

如果此時事件循環(huán)中已經(jīng)有 20 個項目怎么辦？您的回調(diào)等待。它排在其他人后面——通常沒有用于搶占隊列和跳過隊列的路徑。這解釋了為什么 setTimeout(…) 計時器可能無法以完美的時間精度觸發(fā)。您可以保證（粗略地說）您的回調(diào)不會在您指定的時間間隔之前觸發(fā)，但它可以在該時間或之后發(fā)生，具體取決于事件隊列的狀態(tài)。

因此，換句話說，您的程序通常被分解成許多小塊，這些小塊在事件循環(huán)隊列中一個接一個地發(fā)生。從技術(shù)上講，與您的程序不直接相關(guān)的其他事件也可以在隊列中交錯。

Parallel Threading

將術(shù)語“異步 async”和“并行 parallel”混為一談是很常見的，但它們實際上是完全不同的。 請記住，異步是關(guān)于現(xiàn)在和以后之間的gap. 但并行是指事物能夠同時(simultaneously)發(fā)生。

最常見的并行計算工具是進(jìn)程和線程。 進(jìn)程和線程獨立執(zhí)行，也可能同時執(zhí)行：在不同的處理器上，甚至在不同的計算機上，但多個線程可以共享單個進(jìn)程的內(nèi)存。

相比之下，事件循環(huán)將其工作分解為任務(wù)并串行執(zhí)行，不允許并行訪問和更改共享內(nèi)存。 并行和串行可以在不同線程中以協(xié)作事件循環(huán)的形式共存。

并行執(zhí)行線程的交織和異步事件的交織發(fā)生在非常不同的粒度級別。

例如：

function later() {answer = answer * 2;console.log( "Meaning of life:", answer ); }

雖然 later() 的全部內(nèi)容將被視為單個事件循環(huán)隊列條目，但在考慮運行此代碼的線程時，實際上可能有十幾種不同的低級操作。 例如，answer = answer * 2 需要首先加載 answer 的當(dāng)前值，然后將 2 放在某處，然后執(zhí)行乘法，然后取結(jié)果并將其存儲回 answer。

在單線程環(huán)境中，線程隊列中的項是低級操作真的沒有關(guān)系，因為沒有什么可以中斷線程。 但是如果你有一個并行系統(tǒng)，其中兩個不同的線程在同一個程序中運行，你很可能會出現(xiàn)不可預(yù)測的行為。

考慮下面這段代碼：

var a = 20;function foo() {a = a + 1; }function bar() {a = a * 2; }// ajax(..) is some arbitrary Ajax function given by a library ajax( "http://some.url.1", foo ); ajax( "http://some.url.2", bar );

總結(jié)

以上是生活随笔為你收集整理的JavaScript 异步执行的学习笔记 - 什么是事件循环 Event loop？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。