事件循環(huán)協(xié)調(diào)JavaScript異步任務(wù)，確保主線程高效運(yùn)行。 1.同步代碼優(yōu)先執(zhí)行，進(jìn)入調(diào)用棧依次完成；2.異步操作分兩類：宏任務(wù)（如setTimeout）進(jìn)宏隊(duì)列，微任務(wù)（如Promise.then）進(jìn)微隊(duì)列；3.事件循環(huán)先清空當(dāng)前宏任務(wù)，再清空微任務(wù)，最後取下一個(gè)宏任務(wù)；4.微任務(wù)優(yōu)先級(jí)更高，保證異步操作的連貫性；5.Node.js中事件循環(huán)分多個(gè)階段，如timers、poll、check等，各階段處理特定回調(diào)，且階段切換時(shí)清空微任務(wù)隊(duì)列。

JavaScript 的事件循環(huán)（Event Loop）是理解JavaScript 異步編程的關(guān)鍵。很多人在使用setTimeout、Promise 或async/await 時(shí)，可能會(huì)遇到一些看似奇怪的行為，比如為什麼某些代碼不是按順序執(zhí)行的。這背後就是事件循環(huán)在起作用。

簡(jiǎn)單來(lái)說(shuō)，事件循環(huán)負(fù)責(zé)協(xié)調(diào)代碼執(zhí)行、處理I/O 操作以及管理異步任務(wù)。它讓JavaScript 在單線程上也能高效運(yùn)行異步操作。

1. 調(diào)用棧與同步任務(wù)優(yōu)先

JavaScript 是單線程語(yǔ)言，意味著它一次只能做一件事。這個(gè)“主線程”上的執(zhí)行機(jī)制依賴於一個(gè)叫做調(diào)用棧（Call Stack）的結(jié)構(gòu)。

當(dāng)你運(yùn)行一段代碼時(shí)，函數(shù)會(huì)被依次推入調(diào)用棧中執(zhí)行。如果是同步代碼，那就會(huì)一直執(zhí)行到棧空為止。例如：

 function a() {
  console.log('a');
}

function b() {
  console.log('b');
}

a();
b();

這段代碼會(huì)先輸出a ，再輸出b ，順序很清晰。但如果裡面有異步操作，事情就變得複雜了。

2. 宏任務(wù)（Macrotask）與微任務(wù)（Microtask）

當(dāng)有異步操作出現(xiàn)，比如setTimeout 或Promise.then，它們並不會(huì)立刻執(zhí)行，而是被分別放到不同的任務(wù)隊(duì)列裡等待執(zhí)行時(shí)機(jī)。

• 宏任務(wù)：包括整體代碼塊、setTimeout、setInterval、I/O 操作等。
• 微任務(wù)：包括Promise.then/catch/finally、MutationObserver、queueMicrotask 等。

事件循環(huán)的工作流程大致如下：

• 執(zhí)行當(dāng)前宏任務(wù)（比如全局腳本）
• 清空所有可執(zhí)行的微任務(wù)
• 取出下一個(gè)宏任務(wù)執(zhí)行

舉個(gè)例子：

 console.log('start');

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

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

console.log('end');

輸出結(jié)果是：

 start
end
promise
timeout

因?yàn)閜romise.then 屬於微任務(wù)，在本輪宏任務(wù)結(jié)束後立即執(zhí)行；而setTimeout 是宏任務(wù)，要等到下一輪事件循環(huán)才執(zhí)行。

3. 事件循環(huán)的不同階段

V8 引擎本身並不處理事件循環(huán)，這部分是由宿主環(huán)境（如瀏覽器或Node.js）提供的。以Node.js 為例，事件循環(huán)分為多個(gè)階段：

• timers 階段：執(zhí)行setTimeout 和setInterval 的回調(diào)
• pending callbacks ：執(zhí)行某些系統(tǒng)操作的回調(diào)（比如網(wǎng)絡(luò)錯(cuò)誤）
• idle, prepare ：內(nèi)部使用，開發(fā)者基本不用關(guān)心
• poll 階段：等待I/O 事件（比如讀取文件或網(wǎng)絡(luò)請(qǐng)求）
• check 階段：執(zhí)行setImmediate 的回調(diào)
• close callbacks ：處理關(guān)閉事件（比如socket.close）

每個(gè)階段都會(huì)執(zhí)行對(duì)應(yīng)的回調(diào)，並且每個(gè)階段之間切換時(shí)，會(huì)清空微任務(wù)隊(duì)列。

4. 微任務(wù)為何優(yōu)先級(jí)更高？

微任務(wù)之所以會(huì)在宏任務(wù)之前執(zhí)行，是因?yàn)樗渺洞_保異步操作的原子性和一致性。

比如，Promise 的鍊式調(diào)用需要盡快得到響應(yīng)，否則中間狀態(tài)可能丟失。微任務(wù)隊(duì)列的存在，保證了這些關(guān)鍵操作不會(huì)被其他宏任務(wù)打斷。

這也是為什麼即使你寫了兩個(gè)setTimeout(0)，但中間夾著一個(gè)Promise.then，那個(gè)then 也會(huì)先執(zhí)行。

基本上就這些。事件循環(huán)看起來(lái)不復(fù)雜，但在實(shí)際開發(fā)中容易忽略細(xì)節(jié)，尤其是在組合使用不同異步API 時(shí)。掌握它，能幫你更好地理解代碼執(zhí)行順序，避免一些看似“奇怪”??的行為。

以上是解釋JavaScript事件循環(huán)及其階段的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！