關於Event Loop的那些事

One thread == One call stack == One thing at one time

Javascript是一種單執行緒(single-thread )的程式語言，會將所需要執行的程式碼放入「呼叫堆疊 (call stack)」中，一層一層往上堆疊，並且一次只會處理一件事、跑一段程式碼。

Blocking

由於一次只能處理一段程式碼，所以當有一條程式碼需要執行很長一段時間，例如：大型while迴圈、網站請求、圖片讀取…，那後面排隊的程式碼就無法順利被執行，這時候就會出現「阻塞 (block)」，

Asynchronous callback

要解決block的情況就需要使用「非同步回呼 (asynchronous callback)」，簡稱 Async callback，有個常見的範例是 “ setTimeout “，以下示範

console.log('hi')

setTimeout(function () {
  console.log('there')
}, 5000)

console.log('JSConfEU')

1. 在call stack中執行console.log('hi')
2. 在call stack中執行setTimeout ，但 setTimeout 這個程式要等5秒過後才會執行，所以被移到另一個地方去待著等著
3. 在call stack中執行console.log('JSConfEU')
4. 5秒過後，setTimeout回來被執行console.log('there') 。

Concurrency & the Event Loop

我們之所以能同時做其他事的原因是：瀏覽器不只有runtime而已。

從下圖可以得知一些執行的流程

setTimeout在stack中執行時，由於需要等待時間，所以被分配到了webapis裡去執行5秒鐘，接著到了工作佇列 (task queue)裡，當stack內已經清空，沒有等待的函式時，setTimeout會藉由event loop，重新回到stack中去執行5秒後的結果。