EVENT LOOP 是什麼？

event loop 決定事件的執行順序

event loop 決定事件的執行順序。

監測兩個目標

1. call stack
   若 stack 不斷被堆疊，超出現限量便會出現錯誤訊息：Maximum call stack size exceeded
2. event queque
   當有非同步操作時，例如 setTimeout，會將其 callback funciton 移到 web API，等到時間到便將 callback funciton 推入 event queque，讓 event loop 監測。

JavaScript 不像其他程式語言 (例如: ruby) 可能是多執行緒 (multiple thread)，JavaScript 是單執行緒 (single thread)，一次只能執行一件事，而其他 runtime (例如：瀏覽器)，也可以是多執行緒，可以同時做很多事。

運行順序

1. 檢查 stack 是否為空，若為空進入 2.
2. 檢查 event queque，並將 event queque 依序移入 stack
3. 回到步驟 1.

而為了避免卡住 Call Stack Blocking

google chrome 一個分頁是一個 process，一個 process 底下可以有很多 thread。

Event loop 的工作

查看堆疊 (stack)、查看任務佇列 (queque)
event loop 的特性，必須等到 stack 清空後，再把 callback 推回到 stack 上

即便將 setTimeout 的時間設為 0

一樣會將其推遲堆疊清空為止。

不要阻礙 event loop

指的是不要在 stack 上放慢到不行的程式

hw1：Event Loop

console.log(1)
setTimeout(() => {
  console.log(2)
}, 0)
console.log(3)
setTimeout(() => {
  console.log(4)
}, 0)
console.log(5)

為了解上述程式碼的運行順序，要先分別解釋什麼是 call stack 、 setTimeout、event loop。

call stack

函式呼叫時會產生執行環境，當多個函示被呼叫就會產生多個執行環境，並依序堆疊上去，這稱為執行堆疊 (call stack)。

call stack 是後進先出 (LIFO, last in, First out)，也就是後執行的先離開

setTimeout

setTimeout 不存在 JavaScript 的原始碼內，是由瀏覽器提供的 Web API。因 Web API 通常會耗時，為了不影響 JavaScript 的主程式運行，JS 引擎會略過 setTimeout， JS 引擎持續運行下去，同時瀏覽器根據 setTimeout 給定的時間開始計時。

而 setTimeout，等到給的時間結束後並非直接執行，會等待整個 JS 的執行環境結束，call stack 清空之後再將 setTimeout 送入 call stack 再執行。

evnt loop

event loop 決定事件的執行順序，會不斷監控 call stack 以及 event queque。

運行順序

1. 檢查 call stack 是否為空，若為空進入 2.
2. 檢查 callback queque，並將 callback queque 依序移入 call stack
3. 回到步驟 1.

解釋程式碼運行的順序與原因

1. console.log(1) 進入 call stack 執行 console.log(1)，印出 1，console.log(1) 離開 call stack。
2. 第一個 setTimeout 的函式進入 stack 執行，但因是 Web API，故被 JS 引擎略過，JS 主程式繼續運行下去，但同時瀏覽器開始計時。