之前說過 JavaScript 是同步執行的,
但是瀏覽器中不只有 JavaScript 引擎,
還有渲染引擎跟 Web API 等等,
Web API 中有許多事件像是點擊事件、HTTP 請求事件等許多事件,
這裡面只有 JavaScritp 引擎是同步執行的,
渲染引擎跟 Web API 中的網頁事件都是非同步執行的,

當事件發生後事件會被加進事件柱列(Event Queue)中,

事件柱列中的事件會等待執行堆疊中的內容清空後才會被執行,

每個事件發生後會觸發呼叫自己的事件處理器(回呼 function 或稱 callback ),
callback 被呼叫後會產生執行脈絡並添加到執行堆疊來執行,
當一個事件的 callback 的執行脈絡離開執行堆疊後下一個事件的 callback 的執行脈絡才會被加進執行堆疊,
按照事件被添加到事件柱列的順序(事件發生的先後)來依序執行後面的每個事件,

以下提供一個例子來證明一個執行時間較長的 function 會影響事件的執行:

// long running function
function waitThreeSeconds(params) {
  var ms = 3000 + new Date().getTime();
  while (new Date() < ms) {}
  console.log("function 執行完成");
}

function loadHandler() {
  console.log("讀取完成");
}

// 監聽點擊事件
window.addEventListener("load", loadHandler);

waitThreeSeconds();

console.log("程式碼執行完最後一行");

在開發者工具 console 中的結果:

可以看到頁面讀取事件已經完成但是被長時間執行的 function 影響而延後執行,

另外讀取完頁面的事件是在執行完全域執行脈絡的最後一行程式碼(執行堆疊清空)之後才出現,
代表事件不會讓程式碼因此停止執行,
這就是 JavaScript 中非同步事件的非阻塞特性,
確保所有程式碼不因為為一個事件沒執行完就停住不繼續往後執行程式碼.