JavaScript的事件循環(huán)通過管理調(diào)用棧和任務(wù)隊列實現(xiàn)非阻塞異步執(zhí)行。 1. 當(dāng)代碼執(zhí)行時，函數(shù)依次入棧；2. 異步操作（如setTimeout、fetch）被交給瀏覽器API處理，完成後其回調(diào)進(jìn)入任務(wù)隊列；3. 事件循環(huán)持續(xù)檢查：當(dāng)調(diào)用棧為空時，優(yōu)先清空微任務(wù)隊列（如Promise回調(diào)），再執(zhí)行一個宏任務(wù)（如setTimeout）；4. 因此，即便setTimeout為0毫秒，也會在同步代碼和微任務(wù)之後執(zhí)行，確保當(dāng)前任務(wù)不被中斷；5. 這種機(jī)制使JavaScript雖為單線程，仍能高效響應(yīng)異步操作。

The event loop is a core part of JavaScript's concurrency model that enables non-blocking execution, allowing JavaScript to handle asynchronous operations like timers, HTTP requests, and user interactions—despite being single-threaded.

How JavaScript Handles Code Execution

JavaScript runs on a single call stack, meaning it can only execute one piece of code at a time. When you call a function, it gets pushed onto the stack; when it returns, it's popped off. But if a task takes a long time (like waiting for a server response), blocking the stack would freeze the entire page.

To avoid this, JavaScript offloads slow tasks to browser APIs (like fetch , setTimeout , or DOM events). These run in the background, and once they complete, their callbacks are placed in a task queue (or callback queue ).

The Role of the Event Loop

The event loop continuously checks two things:

• Is the call stack empty?
• Are there any callbacks in the task queue?

It only pushes a callback from the queue onto the stack when the stack is completely empty. This ensures that currently running code finishes before any asynchronous callback runs.

Here's a simplified breakdown:

• Call Stack : Where functions are executed.
• Web APIs : Browser-provided APIs that handle async operations (eg, setTimeout , fetch ).
• Callback Queue (Task Queue) : Holds callbacks ready to be executed.
• Event Loop : Monitors the call stack and queue, moving callbacks to the stack when possible.

Example to Illustrate

 console.log("1");

setTimeout(() => {
  console.log("2");
}, 0);

console.log("3");

You might expect this to log 1 , 2 , 3 —but it logs 1 , 3 , 2 .

Why?

• "1" is logged immediately.
• setTimeout is sent to a Web API, which waits 0ms, then puts its callback in the task queue.
• "3" is logged next because it's part of the main script (synchronous code).
• Only after the call stack is clear does the event loop pick up the setTimeout callback and log "2" .

Microtasks vs Macrotasks

Not all async callbacks are treated equally. There are two types of queues:

• Macrotask Queue : setTimeout , setInterval , I/O, UI rendering.
• Microtask Queue : Promise.then/catch/finally , queueMicrotask .

The event loop always processes the microtask queue entirely after each macrotask, before going back to the macrotask queue.

Example:

 console.log("Start");

Promise.resolve().then(() => console.log("Microtask"));

setTimeout(() => console.log("Timeout"), 0);

console.log("End");

Output:

 Start
End
Microtask
Timeout

Even though both the promise and timeout are ready quickly, the microtask runs before the next macrotask.

Key Takeaways

• The event loop enables async behavior in JavaScript by managing the call stack and task queues.
• It ensures the main thread isn't blocked by delegating long-running tasks to browser APIs.
• Microtasks (like Promises) have higher priority than macrotasks (like setTimeout ).
• The loop checks: stack empty? → run microtasks → run one macrotask → repeat.

Basically, it's what makes JavaScript feel fast and responsive, even with heavy async operations.

以上是JavaScript中的事件循環(huán)是什麼？它如何工作？的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！