歡迎來到我們系列文章的第三篇,關于可視化
Node.js
事件循環。在上一篇文章中,我們探討了微任務隊列及其在執行異步代碼時的優先級順序。在本文中,我們將討論定時器隊列,這是 Node.js
中用于處理異步代碼的另一個隊列。
在我們深入研究定時器隊列之前,讓我們快速回顧一下微任務隊列。要將回調函數排入微任務隊列,我們使用諸如 process.nextTick()
和 Promise.resolve()
這樣的函數。微任務隊列在執行 Node.js 中的異步代碼時具有最高的優先級。
回調函數隊列
現在讓我們轉向定時器隊列。要將回調函數排入定時器隊列,我們可以使用 setTimeout
和 setInterval
等函數。在本博客文章中,我們將使用 setTimeout
。
為了理解定時器隊列中的執行順序,讓我們進行一系列實驗。我們將在微任務隊列和定時器隊列中排隊任務。
實驗 3
// index.js
setTimeout(() => console.log("這是 setTimeout 1"), 0);
setTimeout(() => console.log("這是 setTimeout 2"), 0);
setTimeout(() => console.log("這是 setTimeout 3"), 0);
process.nextTick(() => console.log("這是 process.nextTick 1"));
process.nextTick(() => {
console.log("這是 process.nextTick 2");
process.nextTick(() =>
console.log("這是內部的下一個 tick,位于下一個 tick 內部")
);
});
process.nextTick(() => console.log("這是 process.nextTick 3"));
Promise.resolve().then(() => console.log("這是 Promise.resolve 1"));
Promise.resolve().then(() => {
console.log("這是 Promise.resolve 2");
process.nextTick(() =>
console.log("這是內部的下一個 tick,位于 Promise then 塊內部")
);
});
Promise.resolve().then(() => console.log("這是 Promise.resolve 3"));
這段代碼包含三次對process.nextTick()
的調用、三次對 Promise.resolve()
的調用和三次對setTimeout
的調用。每個回調函數記錄了相應的消息。所有三個 setTimeout
調用的延遲為 0 毫秒,這意味著每個 setTimeout
語句在調用堆棧上執行時,回調函數都會立即排隊。第二個 process.nextTick()
和第二個 Promise.resolve()
都有額外的 process.nextTick()
語句,每個都有一個回調函數。
當調用堆棧執行所有語句時,我們得到了三個回調函數在
nextTick
隊列中,三個在Promise
隊列中,以及三個在定時器隊列中。沒有進一步的代碼需要執行,控制進入事件循環。
nextTick
隊列具有最高的優先級,其次是 Promise
隊列,然后是定時器隊列。從 nextTick
隊列中出列并執行第一個回調函數,記錄一條消息到控制臺。然后,第二個回調函數被出列并執行,也記錄了一條消息。第二個回調函數包含對process.nextTick()
的調用,它向nextTick
隊列添加了一個新的回調函數。執行繼續,第三個回調函數被出列并執行,同樣記錄了一條消息。最后,新添加的回調函數被出列并在調用堆棧上執行,導致控制臺中的第四條日志消息。
nextTick
隊列為空后,事件循環轉移到Promise
隊列。第一個回調函數在調用堆棧上出列并執行,將一條消息打印到控制臺。第二個回調具有類似的效果,并且還向 nextTick
隊列添加了一個回調函數。在 Promise
中的第三個回調函數被執行,導致下一條日志消息。此時,Promise
隊列為空,事件循環檢查 nextTick
隊列是否有新的回調函數。找到一個,它也被執行并記錄一條消息到控制臺。
現在,兩個微任務隊列都為空了,事件循環轉移到定時器隊列。我們有三個回調函數,它們逐個在調用堆棧上出列并執行。這將打印出 "setTimeout 1"
、"setTimeout 2"
和 "setTimeout 3"
。
微任務隊列中的回調函數在定時器隊列中的回調函數之前執行。
好的,到目前為止,優先級順序是 nextTick
隊列,然后是 Promise
隊列,最后是定時器隊列。現在讓我們繼續進行下一個實驗。
實驗 4
// index.js
setTimeout(() => console.log("這是 setTimeout 1"), 0);
setTimeout(() => {
console.log("這是 setTimeout 2");
process.nextTick(() =>
console.log("這是 setTimeout 中的內部 nextTick")
);
}, 0);
setTimeout(() => console.log("這是 setTimeout 3"), 0);
process.nextTick(() => console.log("這是 process.nextTick 1"));
process.nextTick(() => {
console.log("這是 process.nextTick 2");
process.nextTick(() =>
console.log("這是下一個 next tick 內部的內部 next tick")
);
});
process.nextTick(() => console.log("這是 process.nextTick 3"));
Promise.resolve().then(() => console.log("這是 Promise.resolve 1"));
Promise.resolve().then(() => {
console.log("這是 Promise.resolve 2");
process.nextTick(() =>
console.log("這是 Promise then 塊中的內部 next tick")
);
});
Promise.resolve().then(() => console.log("這是 Promise.resolve 3"));
第四個實驗的代碼與第三個實驗的代碼大部分相同,只有一個例外。現在,傳遞給第二個setTimeout
函數的回調函數包括對 process.nextTick()
的調用。
讓我們應用從上一個實驗中學到的知識,并快進到微任務隊列中的回調函數已經執行的時刻。假設我們在定時器隊列中排隊了三個回調函數。第一個回調函數被出列并在調用堆棧上執行,導致控制臺打印出一條
"setTimeout 1"
消息。事件循環繼續并執行第二個回調函數,導致控制臺打印出"setTimeout 2"
消息。然而,這也在 nextTick
隊列中排隊了一個回調函數。
在執行定時器隊列中的每個回調函數后,事件循環會返回并檢查微任務隊列。它檢查 nextTick
隊列并識別需要執行的回調函數。這個回調函數被出
列并在調用堆棧上執行,導致控制臺打印出 "內部 nextTick"
消息。
現在微任務隊列為空了,控制權回到定時器隊列,最后一個回調被執行,導致控制臺上打印出"setTimeout 3"
消息。
微任務隊列中的回調函數在執行定時器隊列中的回調函數之間執行。
實驗 5
// index.js
setTimeout(() => console.log("這是 setTimeout 1"), 1000);
setTimeout(() => console.log("這是 setTimeout 2"), 500);
setTimeout(() => console.log("這是 setTimeout 3"), 0);
這段代碼包含了三個 setTimeout
語句,排隊了三個不同的回調函數。第一個 setTimeout
延遲了 1000 毫秒,第二個延遲了500
毫秒,第三個延遲了0
毫秒。回調函數在執行時只是簡單地將一條消息記錄到控制臺中。
代碼片段的執行非常簡單。當進行多個 setTimeout
調用時,事件循環首先排隊最短延遲的那個,并在其他調用之前執行它。因此,我們首先觀察到 "setTimeout 3"
被執行,然后是"setTimeout 2"
,最后是 "setTimeout 1"
。
定時器隊列中的回調函數按照先進先出(FIFO)的順序執行。
結論
實驗表明,微任務隊列中的回調函數優先級高于定時器隊列中的回調函數,并且微任務隊列中的回調函數在執行定時器隊列中的回調函數之間執行。定時器隊列遵循先進先出(FIFO
)的順序。