Event Loop 其實也就這點事

PrototypeZ 發(fā)布于2019-08-23 11:40 / 2289人閱讀

摘要：眾所周知，是，也就意味著在執(zhí)行的過程中，是，而這樣的特性，正是由一個叫的東西決定的有且僅有一個。無論從工程效率還是用戶體驗的角度來說，這都是不被允許的一件事情。五秒后，結(jié)束計時，將回調(diào)函數(shù)下放到中。至此，正式引出的概念。

前段時間在網(wǎng)上陸續(xù)看了很多關(guān)于 Event loop 的文章，看完也就混個眼熟，可能內(nèi)心深處對這種偏原理的知識有一些抵觸心情，看完后也都沒有去深入理解。最近在看 Vue 的源碼，在讀到關(guān)于 nextTick 的實現(xiàn)時，總有一種似曾相識的感覺，于是去網(wǎng)上查了下資料，原來 nextTick 的實現(xiàn)正是基于 Event loop 機制（引起重視了）。
Anyway，在翻閱了一些資料以后，將我對 Event loop 的理解記錄下來，愛看不看。

Call Stack

眾所周知，JavaScript 是 one-threaded，也就意味著在執(zhí)行 JavaScript 的過程中，是 One thing at a time，而這樣的特性，正是由一個叫 Call Stack 的東西決定的（有且僅有一個）。
既然是棧，就滿足 FILO 的原則。故 Call Stack 在函數(shù)運行時的表現(xiàn)為：

當(dāng)有函數(shù)執(zhí)行時，該函數(shù)被 push 到 Call Stack

當(dāng)函數(shù)執(zhí)行結(jié)束時，該函數(shù)從 Call Stack 內(nèi)被 pop 出

如果函數(shù)內(nèi)有調(diào)用到其他函數(shù)（執(zhí)行結(jié)束前），則將其他函數(shù)再 push 到 Call Stack 中，等到調(diào)用結(jié)束時 pop 出

由此可見，如果一個函數(shù)定義如下：

const dead = () => {
    return dead();
}

那么當(dāng)其被執(zhí)行時，就會向 Call Stack 中不斷的 push 同一個函數(shù)（dead），導(dǎo)致整個頁面掛掉。

When Call Stack Meets Sync Request

眾所又周知了，在 jQuery 提供的 Ajax 函數(shù)中，可供開發(fā)者選擇請求是 sync 還是 async，我們先討論 Call Stack 遇到 sync 請求時會發(fā)生什么。

const name = $.ajaxSync(URL_1);
const info = $.ajaxSync(URL_2);
const work = $.ajaxSync(URL_3);

console.log(name);
console.log(info);
console.log(work);

屋漏偏逢連陰雨，此時的網(wǎng)絡(luò)狀態(tài)又極差，每一個網(wǎng)絡(luò)請求從發(fā)出到成功要經(jīng)歷五秒，想象一下上面這段代碼如果跑起來了，會發(fā)生什么？
這是一件讓人絕望的事情：
隨著程序的推進，ajaxSync 函數(shù)會先后三次被 push 并 pop 出 Call Stack，而每一次從 push 到 pop 的過程需要耗費五秒鐘的時間。
無論從工程效率還是用戶體驗的角度來說，這都是不被允許的一件事情。

Async & Callback

為了杜絕上面的問題，瀏覽器提供給了開發(fā)者一個叫做異步 + Callback 的解決方案。先看一段代碼：

console.log("kyrieliu");

setTimeout(function(){
    console.log("about Event Loop");
}, 5000);

console.log(" is writing an article ");

運行結(jié)果顯而易見。
ok，那么這段代碼在 Call Stack 中的表現(xiàn)又是怎樣的呢？
基于上面文章所述，我推測：
首先，第一行代碼入棧，執(zhí)行完畢后出棧；緊接著，setTimeout 入棧，然后emmm，事情有點不對勁了：如果 setTimeout 入棧執(zhí)行后立刻出棧，那么它內(nèi)部的 console 為什么五秒后才打印出來？

Task Queue

問題的關(guān)鍵，是一個叫做 Task Queue 的東西。
緊接著剛才的步驟：setTimeout入棧后執(zhí)行并觸發(fā)了一個五秒的 timer，這個 timer 由 Web api 維護，至此，setTimeout執(zhí)行完畢并出棧，第三個 console 入棧執(zhí)行并出棧。五秒后，timer 結(jié)束計時，將回調(diào)函數(shù) callback 下放到 task queue 中。
但 callback 還未執(zhí)行，它什么時候執(zhí)行呢？Call Stack 為空的時候。
此時的 call stack 已經(jīng)為空，所以 callback 被 push 進棧執(zhí)行并 pop 出，這樣一來就解釋得通了。
至此，正式引出 Event Loop 的概念。

Event Loop

If the call stack is clear and there"s something in the task queue, push the first thing on the queue onto the stack.

setTimeout(callback, 0)

在最開始接觸 JavaScript 的時候，看到上面這行代碼的我是懵蔽的，0ms 后執(zhí)行 callback， WTF?
在了解了 Event Loop 的運行機制后，再回過頭來嘗試解釋一下這行代碼，即：在 setTimeout 入棧執(zhí)行時，內(nèi)部的 callback 會立即被下放到 task queue 中，但它無法執(zhí)行，因為此時的 call stack 不為空，等到 call stack 為空時，callback 才得以執(zhí)行。

Thanks

Philip Roberts: Help, I’m stuck in an event-loop.

A super-cool demo of Event Loop

廣而告之