hw1.md

hw1：Event Loop

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

Event Loop 在瀏覽器中有四個執行步驟

1. Browser console：瀏覽器最終顯示
2. Call Stack：執行的城市函式依序放用 Stack 中，程式堆疊後進先出
3. Web APi：執行的程式為非同步 WebAPIs 時 在此運作，如 setTimeout、XMLHttpRequest 等等
4. Callback Queue：Event Loop機制會判斷若 Call Stack 為空則從此佇列丟值過去，先進先出。

流程：

1. 執行 console.log(1) 放到 Call Stack 中，直接執行 Browser console 顯示 1，console.log(1) 從 Call Stack 中移除。

2. 執行 setTimeout(() => {console.log(2)}, 0) 放到 Call Stack 中，將此 setTimeout() 丟入 Web APi 同步執行，執行完畢則將() => {console.log(2)}放入 Callback Queue 中等待將結果丟回 Call Stack 。

3. 同第一步，執行 console.log(3) 後，直接打印並從 Call Stack 移除。

4. 同第二步，執行 setTimeout(() => {console.log(4)}, 0) ，此時() => {console.log(4)}在 Callback Queue 裡的順序在 () => {console.log(2)} 之後。

5. 同第一步，執行 console.log(5) 後，直接打印並從 Call Stack 移除。

6. Callback Queue 為空時，Event Loop 將 Callback Queue 裡內容依序放到 Callback Queue 中執行，依序列出 console.log(2) 及 console.log(4)

雖然兩個 setTimeout() 時間皆為0秒，但是 setTimeout() 都會多跑一次 Web APi、Callback Queue 及 Event Loop 判斷流程，所以執行順序會不同。
所以最後瀏覽器 console 的結果會是

1 -> 3 -> 5 -> 2 -> 4

console.log(1) console.log(3) console.log(5) console.log(2) console.log(4)