那些年不懂的JS - Event Loop


Posted by Andy Tsai on 2020-04-12

Javascript是一個Single Thread(單執行緒)語言,一次只會做一件事,

那麼在這個環境中,如果有個事件要等10秒後執行,整個網頁不就會卡在那10秒等它嗎? 這樣體驗也太差了吧!

沒錯,所以為了防止這種事發生,勢必要有一個機制來處理非同步行為,這就是Event Loop的用處

JS的運行

在JS的執行緒中,有Heap和Stack,Heap是處理記憶體分配的地方,
而在這個Stack中,就是所有的JS任務,每個任務執行完後就會彈出Stack。

流程是,JS執行緒會逐一執行Stack內的程式,當遇到非同步行為時,就會呼叫Web Api處理,然後再放到Event Queue裡,等Stack的程式都跑完,清空了,就會開始逐一執行Event Queue中的任務

這個過程是不斷循環的,所以這機制又稱為Event Loop

範例動畫流程

動畫取自 JavaScript Visualized: Event Loop

  1. greet函式被調用,return 'Hello!',彈出Stack;
    respond函式被調用,return一個setTimeout

  2. 由於respond函式return了一個非同步行為(setTimeout),所以會把setTimeout轉交給Web Api處理,接著respond()彈出Stack

  3. 設定的1秒到了,添加到Event Queue裡

  4. 如果Stack為空,那麼Event Queue中的第一項將被添加到Stack

  5. 在Stack中return 'Hey',彈出Stack

簡單題目測試

這段程式輸出的結果是?

function test(){

  console.log('a')

  setTimeout(() => {
    console.log('b')
  }, 0)

  console.log('c')
}

test()

答:
a
c
b

因為b是一個非同步事件,他會被放到Event Queue裡,
也就是說,它在所有程式執行完(Stack清空)後才會執行,所以答案就是a->c->b

Reference:
https://www.youtube.com/watch?v=8aGhZQkoFbQ
https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif


#w3HexSchool #javascript #Event Loop #Event Queue







Related Posts

MTR04_0817

MTR04_0817

刪除 node

刪除 node

Vue.js 學習旅程Mile 13 – List Rendering 列表渲染篇:v-for

Vue.js 學習旅程Mile 13 – List Rendering 列表渲染篇:v-for



Comments