event loop 是什麼？｜Alpha Camp 學期 2-2期末驗收

這是我記錄自學程式，Alpha Camp 學期2-2的期末驗收筆記。
回顧：Alpha Camp 學期 2-2心得，認識API, HTTP, Ajax

學期2-2是Alpha Camp第二學期的第二階段，目標是學會API，透過瀏覽器要資料。

每階段的尾聲都會有期末驗收，學期2-2的驗收有別於以往解程式題目，這次是比較特別的兩個要求：

研究還看不懂的內容，搞懂它後並輸出成筆記
利用ORID框架回顧自己的進步

本篇內容是「研究還看不懂的內容，搞懂它後並輸出成筆記」。

期末驗收 – 消失的延遲？

題目的開頭給了段程式碼，要我們思考程式結果會是什麼？

setTimeout(function(){console.log('delay 0 sec')}, 0)
console.log('Hello!')

setTimeout是在JavaScript(後稱JS)中，功能為「倒數計時」的函式。從上程式碼字面意義看來，會期待程式結果：

先 console.log(‘delay 0 sec’)
再 console.log(‘Hello!’)

但實際執行的結果卻是：

setTimeout-會進入-task-queue.png — 結果居然先執行：第二行 console.log(‘Hello!’)

為理解「為何是 console.log(‘Hello!’) 先跑出結果」，得先認識「event loop」。這次Alpha Camp給了釣竿，讓我們自己找出魚吃，找出「為何setTimeout延遲0秒，仍然有延遲」

AC給的釣竿：

What the heck is the event look anyway?

event loop 是什麼？

影片14:10處，講者提到 event loop是：「look at the stack and look at the task queue. if the stack is empty, it takes the first thing on the queue and pushes it onto the stack which effectively runs it.」

用中文說就是：

當stack裡的所有任務執行完成後(empty)
將task queue裡的任務依序一個個放進stack裡執行

循環這兩個步驟，步驟直到stack跟task queue內的任務都執行完畢。

Bang！ setTimeout進入了task queue

在理解event loop運作後，就可以解釋為何會出現「消失的延遲」。

因為 setTimeout的callback function進入task queue，所以須等在stack的console.log(‘Hello!’)跑完，才會接著跑 task queue內的console.log(‘delay 0 sec’)：

stack執行程式，setTimeout(function(){console.log(‘delay 0 sec’)}, 0)
setTimeout 裡的callback(console.log(‘delay 0 sec’))進入 task queue等待
stack執行程式，console.log(‘Hello!’)
task queue任務轉進 stack，執行callback(console.log(‘delay 0 sec’))

其他知識點

block

當人說：不要block(阻塞) event loop時，

他指得是：不要在stack上放慢到不行的程式，這樣會造成很差的使用者體驗。(瀏覽器無法執行該做的事，全部的事都在task queue等stack結束才能被執行)

stack 與 task queue

stack
等待執行的任務會放入一個堆疊 (stack)，被稱為 Call stack

task queue
各種非同步事件會在 task queue 中暫存，等待stack清空後轉入 stack

callback

回調，任何一個函式所呼叫的任何一種函式，簡稱cb。

例如「消失的延遲」中 setTimeout(function(){console.log(‘delay 0 sec’)}, 0)，function(){console.log(‘delay 0 sec’)}, 0 就是一個 callback。

單執行緒與多執行緒

單執行緒：一次只能處理一件事
JS 就是屬於單執行緒(單線程)，所以一次只能執行一個任務。

多執行緒：一次可以處理多件事
瀏覽器則是屬於多執行緒(多線程)，setTimeout就是瀏覽器開放給JS的API，因此setTimeout的call back才能進入task queue。

v8引擎

由於JS是直譯語言。要成功執行JS，必須將程式碼再轉譯成電腦「看得懂」的語言，V8 引擎就是Google 做出來讓 JS 跟瀏覽器溝通的解決方案。

參考來源：

Archives

Categories

event loop 是什麼？｜Alpha Camp 學期 2-2期末驗收

期末驗收 – 消失的延遲？