關於非同步回呼

發表於 更新於 分類於

在章節的最前面有提到 JavaScript 會同步執行程式碼，而非同步指的就是在同一個時間不只執行一段程式碼

在瀏覽器中，JavaScript 並非唯一執行的引擎，還包括渲染引擎 (Rendering Engine) 和 HTTP Request ，彼此是非同步執行，不會因為一個卡住而使其他引擎停止運作，其中只有 JavaScript 使用同步執行

JavaScript 的非同步其實是瀏覽器將事件放到事件佇列 (Event Queue) 中，原本的程式碼仍然一行行執行，當每個執行堆執行完清空後，才會繼續執行下一個事件，並創造其執行環境

一段程式碼如下，首先執行一段 3 秒的 callback function，並宣告一個點擊事件，最後印出完成，如果在 3 秒內點擊會依照下方順序印出，原因是非同步只存在於 JavaScript 引擎外，所以非同步只是將事件加入 Event Queue，等到執行環境清空後才會依序執行 Event Queue 中的事件 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// long runuing function
function waitThreeSeconds() {
    var ms = 3000 = new Date().getTime();
    while (new Date() < ms){}
    console.log('finished function');
}

function clickHandler() {
    console.log('click event !');
}

// listen for the click event
document.addEventListener('click', clickHandler);

waitThreeSeconds();
console.log('finished execution');

// finished function
// finished execution
// click event