2021年6月28日 星期一

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