JavaScript: Event Loop

前言

有天早上醒來，我忽然在想，當我寫了

setTimeout(function() {
  alert('Hello World!');
}, 5 * 1000);

我真的是五秒之後會看到 "Hello World!" 嗎?如果是，那 JavaScript 怎麼可能是 Single Thread。如果不是，他有是怎麼做讓我「以為」我真的是五秒後看到?

JavaScript 怎麼執行

其他把  Philip Roberts 的影片看完，大概就差不多理解了，所以這邊我就不再贅述了。簡單來說，沒錯 JavaScript 是 Single Thread，所以程式就是由上往下執行，但並非每段程式碼都能由 JavaScript 獨立執行，setTimeout 就是其中一個例子。當你執行 setTimeout，時間是五秒，他就會被丟掉 WebAPI 去處理，等時間到了，再回來 task queue 排隊。所以你說，五秒還會是五秒嗎?有可能是，但不能保證是，只能說，最短是五秒。

再舉例，有時會，我們會發一個 GET request，如果網頁要等 response 才能繼續往下執行，就能容易造成 blocking。所以這時候若使用 async，那就像上面的例子，你可以繼續往下執行，而 response 回來，會被丟進 task queue 排隊，等到下一次換他執行再處理。

 

而 Single Thread 也造就了 never blocking 的特性，因為不會有其他 thread 來 interrupt 所以在執行次序上比較好控管，也不會處理 multi-thread 所以需要煩惱的問題。關於 JavaScript 為什麼不用 multi-thread 我之後沒有意外會再寫一篇。

後記

其實我在工作中，有幾次強制讓 GET request sync，因為我一定要拿到資料才能往下做，我下面也沒有其他事情要做了。但其實想想這樣對網頁能呈現上真的可能會有不良的影響的影響，萬一 response 等了很久最後 timeout 了，不就是賠了夫人又折兵。

References

• 所以說event loop到底是什麼玩意兒？| Philip Roberts | JSConf EU
• Concurrency model and the event loop
• [JavaScript] Javascript 的事件循環 (Event Loop)、事件佇列 (Event Queue)、事件堆疊 (Call Stack)：排隊
• [筆記] 理解 JavaScript 中的事件循環、堆疊、佇列和併發模式（Learn event loop, stack, queue, and concurrency mode of JavaScript in depth）
• JavaScript 运行机制详解：再谈Event Loop
• 【JavaScript筆記】所以事件循環Event Loop到底是什麼？setTimeout 0 的藝術 ─ 我OK、你先請？
• Event Loop 運行機制解析 - 瀏覽器篇