了解 JavaScript 中的事件循環 — 變得簡單！

JavaScript 是最受歡迎的程式語言之一，為網路上90% 的網站提供支援！但是，最棘手且最容易被誤解的概念之一是事件循環的工作原理。這是事件循環、任務佇列、呼叫堆疊、微任務佇列和 Web API 的簡單解釋。

JavaScript 有何特別之處？

JavaScript 是一種單執行緒語言。這意味著它一次處理一件事，與 C 或 Go 等語言不同，後者可以同時處理多個事情。為了使諸如獲取資料或運行計時器之類的非同步任務順利進行，JavaScript 使用了稱為 事件循環！

的東西

1. 什麼是 Web API？

Web API 是瀏覽器或Node.js 提供的額外工具，用於處理諸如發出網路請求（使用fetch）、設定計時器（setTimeout）或存取使用者位置（使用地理定位API）。這些任務在主 JavaScript 執行緒之外運行。

範例：

setTimeout(() => {
  console.log("Timer done!");
}, 2000);

在這裡，瀏覽器處理計時器，同時主 JavaScript 繼續運行其他程式碼。

2.什麼是任務隊列？

任務佇列 是來自 Web API、事件偵聽器和其他延遲操作的回調函數等待 JavaScript 準備好運行它們的地方。這些任務排隊等候。

可以把它想像成商店裡的排隊隊伍，當 JavaScript 完成目前任務時，每個任務都會由事件循環處理。

3.什麼是呼叫棧？

呼叫堆疊 是 JavaScript 追蹤函數呼叫的地方。當你呼叫一個函數時，它會被壓入堆疊。完成後，它就會彈出。 JavaScript 會依照任務在堆疊中出現的順序處理任務，它本質上是同步的。

4.什麼是事件循環？

事件循環就像一名交通員，讓一切保持運轉。它不斷檢查呼叫堆疊是否為空，如果為空，則將任務從任務佇列或微任務佇列移到堆疊中執行。這就是讓 JavaScript 處理非同步程式碼而不會阻塞主執行緒。

的原因

事件循環的實際範例

setTimeout(() => {
  console.log("2000ms");
}, 2000);

setTimeout(() => {
  console.log("100ms");
}, 100);

console.log("End");

這裡發生了什麼事？

讓我們來分解一下：

1. “End”會立即記錄，因為它是同步的並且在呼叫堆疊中運行。
2. 100ms 的 setTimeout 由 Web API 處理。 100ms後，其回呼移動到任務隊列。
3. 2000ms 的 setTimeout 的作用是一樣的，但是它的回調在 2000ms 後移動到 任務隊列。
4. 事件循環先將 100ms 回呼移到 呼叫堆疊，然後是 2000ms 回呼。

5.什麼是微任務隊列？

微任務隊列是一個特殊的隊列，用於在任務隊列之前處理的任務。微任務來自 Promises 或突變觀察者之類的東西。事件循環總是在任務佇列之前檢查微任務佇列。

帶有 Promise 的微任務範例

console.log("Start");

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

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

console.log("End");

這裡發生了什麼事？

1. 「開始」立即被記錄。
2. setTimeout回呼被放置在任務佇列中。
3. Promise 決議被放置在 微任務隊列中。
4. 「結束」已記錄。
5. 事件循環檢查微任務佇列，執行Promise回呼。
6. 最後任務佇列處理setTimeout回呼。

輸出：

Start
End
Promise
Timeout

視覺表現

總結一切

以下是所有內容的組合方式：

1. Web API 處理非同步任務，例如主執行緒以外的計時器。
2. 事件循環將任務從任務佇列或微任務佇列移到呼叫堆疊。
3. 微任務（如承諾）先處理，然後再處理任務佇列中的任務。

以上是了解 JavaScript 中的事件循環 — 變得簡單！的詳細內容。更多資訊請關注PHP中文網其他相關文章！