JavaScript 事件循環：深入探討

發佈於2024-08-06

JavaScript Event Loop: A Deep Dive

JavaScript 是一種單執行緒語言，一次執行一個任務。然而，由於事件循環，它可以輕鬆處理非同步操作。事件循環是一個基本概念，它為 JavaScript 的並發模型提供了動力，使其能夠在不阻塞主執行緒的情況下有效地管理多個操作。在本文中，我們將探討 JavaScript 事件循環的複雜性，了解它的工作原理以及為什麼它對於開發響應式 Web 應用程式至關重要。

什麼是 JavaScript 事件循環？

事件循環是 JavaScript 用來處理非同步操作的機制。它不斷檢查呼叫堆疊和任務佇列，確保任務以正確的順序執行。事件循環的主要目標是透過管理同步和非同步程式碼的執行來保持應用程式的回應能力。

事件循環的關鍵元件

1。呼叫堆疊：

呼叫堆疊是一種依後進先出 (LIFO) 順序追蹤函數呼叫的資料結構。當一個函數被呼叫時，它被加入到堆疊中。當函數執行完成時，它將從堆疊中刪除。

2. Web API：

Web API 由瀏覽器（或 Node.js 環境）提供，用於處理非同步操作，例如 setTimeout、HTTP 請求（XMLHttpRequest、Fetch API）和 DOM 事件。這些 API 在 JavaScript 引擎之外運作。

3.回呼隊列（任務隊列）：

回呼佇列是保存非同步操作回呼的資料結構。當呼叫堆疊為空時執行這些回調。

4。事件循環：

事件循環持續監視呼叫堆疊和回調佇列。如果呼叫堆疊為空，它將從佇列中取出第一個回調並將其推入堆疊，允許其執行。

事件循環如何運作

要了解事件循環，讓我們來看一個範例：

console.log('Start');

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

console.log('End');

逐步執行：

1。初始化：

console.log('Start') 函數被推入呼叫堆疊並執行，將 Start 列印到控制台。然後該函數將從堆疊中刪除。

2.非同步操作：

setTimeout 函數被調用，並帶有回調和 0 毫秒的延遲。 setTimeout 函數被壓入呼叫堆疊，然後在設定計時器後立即刪除。回調被傳遞到 Web API。

3.續：

console.log('End') 函數被壓入呼叫堆疊並執行，將 End 印到控制台。然後該函數將從堆疊中刪除。

4。回調執行：

呼叫堆疊為空後，事件循環檢查回呼佇列。來自 setTimeout 的回呼被移到回調佇列，然後推送到呼叫堆疊，將 Timeout 列印到控制台。

微任務和巨集任務

在 JavaScript 中，任務分為兩種：微任務和巨集任務。理解它們之間的區別對於編寫高效的非同步程式碼至關重要。

1。微任務：

微任務包括 Promise 和 MutationObserver 回調。它們具有更高的優先級，並且在巨集任務之前執行。在每個巨集任務之後，事件循環都會檢查微任務佇列並執行所有可用的微任務。

2.宏任務：

巨集任務包括setTimeout、setInterval和I/O操作。它們按照新增到回調佇列的順序執行。

Promise 範例

考慮以下帶有承諾的例子：

console.log('Start');

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

Promise.resolve().then(() => {
  console.log('Promise');
});

console.log('End');