了解 JavaScript 事件循環（變得簡單）

了解 JavaScript 事件循環（變得簡單）

JavaScript 事件循環 讓 JavaScript 中的非同步程式設計成為可能。簡單解釋一下！

---

？關鍵概念

1. 單線程

JavaScript 只能一次做一件事，因為它是單執行緒的。

console.log("Task 1");
console.log("Task 2");

？輸出：

Task 1
Task 2

2. 同步與非同步

• 同步任務：依序依序運行。
• 非同步任務：不要阻塞主線程；他們等到準備好逃跑。

console.log("Start");

setTimeout(() => {
  console.log("Async Task");
}, 1000);

console.log("End");

？輸出：

Start
End
Async Task

---

？事件循環如何運作

1. 呼叫堆疊

   • 任務一一執行的地方。
   • 當函數運行時，它會被加入到堆疊中。完成後，它會被刪除。

2. Web API

   • 非同步任務（如setTimeout）在這裡處理。他們在後台等待。

3. 回呼隊列

   • 非同步任務完成後，其回調將會加入佇列。

4. 事件循環

   • 事件循環檢查：
     1. 呼叫堆疊是否為空？
     2. 如果是，它會從回呼佇列中取得任務並將它們推入堆疊。

---

✨ 範例：一步一步

console.log("Start");

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

console.log("End");

1️⃣ 呼叫堆疊

Step	Call Stack	Notes
1	console.log	Logs "Start"
2	setTimeout	Registers timeout task
3	console.log	Logs "End"

2️⃣ 網路 API

• setTimeout 轉移到 Web API 並啟動計時器。

3️⃣ 回呼隊列

• 2000ms 後，回呼 (() => console.log("Timeout Task")) 移至佇列。

4️⃣ 事件循環

• 事件循環檢查呼叫堆疊是否為空。
• 回呼被移到堆疊並執行。

？最終輸出：

Start
End
Timeout Task

---

？可視化事件循環

要真正了解事件循環，請查看以下資源：

• 放大鏡
• MDN：並發模型

編碼愉快！ ？

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