前段時間在網上陸續看了很多關于 Event loop 的文章，看完也就混個眼熟，可能內心深處對這種偏原理的知識有一些抵觸心情，看完后也都沒有去深入理解。最近在看 Vue 的源碼，在讀到關于 nextTick 的實現時，總有一種似曾相識的感覺，于是去網上查了下資料，原來 nextTick 的實現正是基于 Event loop 機制（引起重視了）。

Call Stack

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

• 當有函數執行時，該函數被 push 到 Call Stack
• 當函數執行結束時，該函數從 Call Stack 內被 pop 出
• 如果函數內有調用到其他函數（執行結束前），則將其他函數再 push 到 Call Stack 中，等到調用結束時 pop 出

由此可見，如果一個函數定義如下：

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

那么當其被執行時，就會向 Call Stack 中不斷的 push 同一個函數（dead），導致整個頁面掛掉。

When Call Stack Meets Sync Request

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

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

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

Async & Callback

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

console.log('kyrieliu');setTimeout(function(){console.log('about Event Loop'); }, 5000);console.log(' is writing an article ');

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

Task Queue

問題的關鍵，是一個叫做 Task Queue 的東西。
緊接著剛才的步驟：setTimeout入棧后執行并觸發了一個五秒的 timer，這個 timer 由 Web api 維護，至此，setTimeout執行完畢并出棧，第三個 console 入棧執行并出棧。五秒后，timer 結束計時，將回調函數 callback 下放到 task queue 中。
但 callback 還未執行，它什么時候執行呢？Call Stack 為空的時候。
此時的 call stack 已經為空，所以 callback 被 push 進棧執行并 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 后執行 callback， WTF?
在了解了 Event Loop 的運行機制后，再回過頭來嘗試解釋一下這行代碼，即：在 setTimeout 入棧執行時，內部的 callback 會立即被下放到 task queue 中，但它無法執行，因為此時的 call stack 不為空，等到 call stack 為空時，callback 才得以執行。

Thanks

• Philip Roberts: Help, I’m stuck in an event-loop.
• A super-cool demo of Event Loop

廣而告之

個人公眾號，不止于前端

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的Event Loop 其实也就这点事的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。