The event loop coordinates JavaScript asynchronous tasks to ensure that the main thread runs efficiently. 1. Synchronous code is executed first, and it enters the call stack to complete in sequence; 2. Asynchronous operations are divided into two categories: macro tasks (such as setTimeout) enter the macro queue, and micro tasks (such as Promise.then) enter the micro queue; 3. The event loop first clears the current macro task, then clears the micro task, and finally takes a macro task; 4. The micro task has higher priority, ensuring the consistency of asynchronous operations; 5. The event loop in Node.js is divided into multiple stages, such as timesers, poll, check, etc., and each stage handles specific callbacks, and the micro task queue is cleared when the stage switches.

JavaScript's Event Loop is the key to understanding JavaScript asynchronous programming. Many people may encounter seemingly strange behavior when using setTimeout, Promise, or async/await, such as why some code is not executed sequentially. Behind this is the event loop at work.

Simply put, the event loop is responsible for coordinating code execution, handling I/O operations, and managing asynchronous tasks. It allows JavaScript to run asynchronous operations efficiently on a single thread.

1. Call stack and synchronization tasks are preferred

JavaScript is a single-threaded language, meaning it can only do one thing at a time. The execution mechanism on this "main thread" depends on a structure called a call stack.

When you run a piece of code, the functions are pushed into the call stack in turn to execute. If it is synchronous code, it will be executed until the stack is empty. For example:

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

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

a();
b();

This code will output a first and then b , and the order is very clear. But if there are asynchronous operations inside, things get complicated.

2. Macrotask and microtask

When asynchronous operations occur, such as setTimeout or Promise.then, they will not be executed immediately, but will be placed in different task queues to wait for execution.

• Macro tasks : including overall code block, setTimeout, setInterval, I/O operations, etc.
• Microtasks : including Promise.then/catch/finally, MutationObserver, queueMicrotask, etc.

The workflow of the event loop is roughly as follows:

• Execute the current macro task (such as global scripts)
• Clear all executable micro-tasks
• Take out the next macro task and execute it

For example:

 console.log('start');

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

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

console.log('end');

The output result is:

 start
end
promise
timeout

Because promise.then is a micro-task, it is executed immediately after the end of this round of macro-task; while setTimeout is a macro-task, it must be executed until the next round of event loop.

3. Different stages of the event loop

The V8 engine itself does not handle event loops, which is partly provided by the host environment (such as the browser or Node.js). Taking Node.js as an example, the event loop is divided into multiple stages:

• timesers stage : execute callbacks of setTimeout and setInterval
• pending callbacks : Callbacks that perform certain system operations (such as network errors)
• idle, prepare : internal use, developers basically don't have to worry about it
• poll stage : Waiting for I/O events (such as reading files or network requests)
• check stage : execute the callback of setImmediate
• close callbacks : handles closed events (such as socket.close)

Each stage will execute the corresponding callback, and the microtask queue will be cleared when switching between stages.

4. Why are microtasks more prioritized?

The reason why microtasks are executed before macrotasks is because they are used to ensure atomicity and consistency of asynchronous operations.

For example, the chained call of Promise needs to be responded as soon as possible, otherwise the intermediate state may be lost. The existence of a microtask queue ensures that these critical operations will not be interrupted by other macro tasks.

This is also why even if you write two setTimeout(0) and there is a Promise.then in the middle, then will execute first.

Basically that's it. Event loops don't seem complicated, but details are easily overlooked in actual development, especially when using different asynchronous APIs in combination. Mastering it can help you better understand the order of code execution and avoid seemingly "strange" behavior.

The above is the detailed content of Explaining the JavaScript Event Loop and its phases. For more information, please follow other related articles on the PHP Chinese website!