This article refers to Ruan Yifeng’s detailed explanation of Event Loop
What is an EVENT LOOP?
Event Loop is a very important concept, which refers to a kind of operation mechanism of computer system.
Event Queue
Tasks can be divided into synchronous tasks and asynchronous tasks. Synchronous tasks, as the name implies, are immediately executed tasks. Generally, synchronous tasks are directly executed in the main thread. Asynchronous tasks are asynchronously executed tasks, such as Ajax network requests and setTimeout timing functions. Asynchronous tasks are coordinated through the mechanism of task queue (first-in, first-out mechanism). The specific figure can be used to roughly illustrate:
Synchronous and asynchronous tasks enter different execution environments respectively. Synchronous tasks enter the main thread, i.e. the main execution stack, and asynchronous tasks enter the task queue. If the task execution in the main thread is empty, it reads the corresponding task in the task queue and pushes the main thread to execute it. The repetition of this process is known as an Event Loop.
Ii. Event Loop:
There are two types of JavaScript events, macro-tasks and micro-tasks.
-
Macro tasks: including the overall code script, setTimeout, setInterval
-
Microtasks: Promise.then(not new Promise)
-
The execution sequence of events is macro task first, then micro task **, which is basic. Tasks can include synchronous task and asynchronous task. Synchronous task enters the main thread, asynchronous task enters the Event Table and registers the function. Callback functions are placed in the Event Queue (** macro tasks and micro tasks are different Event queues **). After the synchronization task is completed, events are read from the Event Queue and put into the main thread for execution. The callback function may also contain different tasks, so the above operation is repeated.
-
First execute macro task => Event Queue of micro task => Event Queue of macro task **
Here’s an example:
According to the picture, let’s sort out the process:
1. Run console.log(‘script start’) to print script start.
2. Execute setTimeout, which is an asynchronous action, and place it in the macro task asynchronous queue.
3. Run async1(), run async1 start, and continue.
4. Execute async2(), output async2, and return a promise object, await gives the thread and adds the returned promise to the microtask async queue, so the code below async1() should also wait for the completion of the above.
5. Execute new Promise, print promise1, and put resolve into the microtask asynchronous queue.
6. Run console.log(‘script end’) to output script end.
7. The code to this synchronization is completed, and then go to the microtask asynchronous queue to fetch the task
8. Then execute resolve (returned by async2 promise) and print async1 end.
9. Then execute resolve (new Promise) and output promise2.
10. Finally, run setTimeout to output setTimeout.
For promise knowledge and exercises please refer to:
Juejin. Cn/post / 687074…