進階 JavaScript：探索事件循環

介紹

JavaScript 是一種在 Web 開發中強大且廣泛使用的程式語言。它最有趣的方面之一是它的並發模型，儘管它是單線程的，但它允許它有效地處理多個任務。了解事件循環對於編寫高效能且無錯誤的 JavaScript 程式碼至關重要，尤其是在複雜的應用程式中。

理解 JavaScript 的並發模型

單線程性質

JavaScript 是單執行緒的，這表示它按順序執行程式碼，一次執行一個動作。這與多執行緒語言相反，多執行緒語言可以同時運行。然而，JavaScript 使用事件驅動的非阻塞架構來管理並發並有效率地處理非同步任務。

並發模型

JavaScript 使用基於事件循環的並發模型，這使得它能夠執行非阻塞操作。此模型對於處理 I/O 操作、網路請求和使用者互動等任務（無需凍結使用者介面）至關重要。

事件循環解釋

什麼是事件循環？

事件循環是 JavaScript 用來協調程式碼執行、處理事件和管理非同步任務的機制。它不斷檢查呼叫堆疊以查看是否有任何函數需要運行，並在堆疊為空時處理回調佇列中的任務。

事件循環的組成部分

1. 呼叫棧

呼叫堆疊追蹤函數呼叫。當一個函數被呼叫時，它被添加到堆疊中，當它完成時，它被刪除。

例子：

function greet() {
  console.log('Hello');
}

function sayGoodbye() {
  console.log('Goodbye');
}

greet();
sayGoodbye();

• greet() 被呼叫並加入到堆疊中。
• console.log("Hello") 被執行。
• greet() 已從堆疊中刪除。
• sayGoodbye() 被呼叫並加入到堆疊中。
• console.log("再見") 被執行。
• sayGoodbye() 已從堆疊中刪除。

2. Web API

Web API 由瀏覽器（或 Node.js）提供，包括 setTimeout、DOM 事件、fetch 等功能。它們用於執行主執行執行緒之外的任務。

例子：

console.log('Start');

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

console.log('End');

• console.log("Start") 立即執行並記錄。
• setTimeout 被調用，其回調被傳送到 Web API 環境。
• console.log("End") 立即執行並記錄。
• 1秒後，setTimeout的回呼被推送到回呼佇列。
• 一旦呼叫堆疊為空，事件循環就會將回調推送到堆疊，並執行 console.log("Timeout")。

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

回呼佇列保存帶有要處理的回呼的訊息。事件循環從佇列中取出任務，並在堆疊為空時將它們新增至呼叫堆疊中執行。

4. 微任務隊列

微任務佇列用於目前操作完成後需要立即執行的任務。承諾和突變觀察者在這裡處理。

console.log('Start');

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

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

console.log('End');

• console.log("Start") 被執行並記錄。
• setTimeout 回呼以零延遲傳送到回呼佇列。
• 一個 Promise 被解析，並且它的回呼被加入到微任務佇列中。
• console.log("End") 被執行並記錄下來。
• 事件循環處理微任務隊列並記錄console.log("Promise")。
• 回呼佇列已處理，記錄console.log("Timeout")。

以上是進階 JavaScript：探索事件循環的詳細內容。更多資訊請關注PHP中文網其他相關文章！