setTimeout(..., ) 在 JavaScript 中的真正意義是什麼？ （事件循環解釋！）

setTimeout(..., 0ms) 在 JavaScript 中的真正意義是什麼？ （事件循環解釋！）

好吧，讓我們用 0ms 來分解整個 setTimeout 的事情。乍一看，你可能會想，「兄弟，0ms 意味著它會立即運行，對嗎？」但 JavaScript 有它自己的氛圍，0 毫秒並不像你想像的那麼即時。讓我們一起來解決這個問題。

---

代碼：

這是我們正在剖析的程式碼：

const promise = new Promise((resolve, reject) => {
  console.log(1); 
  setTimeout(() => { 
    console.log("timerStart");
    resolve("success"); 
    console.log("timerEnd");
  }, 0); 
  console.log(2); 
});

promise.then((res) => {
  console.log(res); 
})

console.log(4);

輸出呢？

1  
2  
4  
timerStart  
success  
timerEnd  

大問題：0ms 發生了什麼事？

當你看到setTimeout(() => { ... }, 0) 的時候，感覺裡面的程式碼會在0ms後立即運行。但不，JavaScript 就像是，「兄弟，我有自己的系統，等你了！」

---

JavaScript 的系統：事件循環

JavaScript 不僅僅直接運行程式碼，它還有一個名為 事件循環 的很酷的系統來處理任務。像這樣想：

1. 主要任務（同步）:
   
   像 console.log() 這樣的東西首先運行。這些都是直接的、面對面的任務。

2. 微任務（Promise）:
   
   接下來是承諾，甚至在計時器之前。就像他們有一張 VIP 票一樣。

3. 任務佇列（計時器，如 setTimeout）:
   
   計時器位於生產線的後面，僅在微任務完成後運行。即使你給它 0ms，它也會等待。

---

分解代碼

讓我們一步步看看發生了什麼事：

1. 已建立承諾：

   • console.log(1) 立即運行。
   • setTimeout(() => { ... }, 0) 被加到任務佇列。
   • console.log(2) 立即運行。

2. Promise .then():

   • .then() 回呼被加入到 微任務佇列。

3. console.log(4):

   • 直接執行，因為它是主腳本的一部分。

4. 微任務運作（VIP）：

   • promise 得到解決，因此 .then() 回調記錄「成功」。

5. 任務佇列運行：

   • setTimeout 回呼終於輪到了：記錄「timerStart」和「timerEnd」。

---

為什麼 0ms 不代表「現在」？

就算你說 0ms，setTimeout 也是總是延遲。不管怎樣，JavaScript 都會將其推送到任務佇列。在接觸任務佇列之前，系統會先清除所有同步任務和微任務（promise）。

所以，簡單來說：

0 毫秒與時間無關，而是與等待輪到有關。

---

像這樣想

想像一下您正在排隊等待過山車：

1. 同步碼：購買快速通道票的人－他們是第一，毫無爭議。
2. 承諾：持有 VIP 通行證的人——即使遲到，他們也是下一個排隊的人。
3. 計時器（如 setTimeout）：沒有通行證的普通人。即使你告訴他們“0毫秒等待”，他們仍然必須站在常規隊列中。

---

最終輸出回顧

以下是我們程式碼中的事件順序：

1. console.log(1)（同步）
2. console.log(2)（同步）
3. console.log(4)（同步）
4. 來自 .then() 的「成功」（微任務）
5. console.log("timerStart")（任務隊列）
6. console.log("timerEnd")（任務隊列）

---

為什麼這很重要？

了解 0ms 的真正工作原理可以幫助您編寫更好的非同步程式碼。當你的朋友調試 JavaScript 中的隨機延遲時，向他們解釋這也是一個很酷的技巧。

所以下次你看到 setTimeout(() => { ... }, 0) 時，請記住－這與時間無關，而是與時間有關。這是關於優先權！

以上是setTimeout(..., ) 在 JavaScript 中的真正意義是什麼？ （事件循環解釋！）的詳細內容。更多資訊請關注PHP中文網其他相關文章！