JS event polling mechanism explained

JS is a single-threaded language. In-depth understanding of Event Loop in JS. This article mainly shares the JS event polling mechanism with you. I hope it can help you.

Execution mechanism of JS (1):

1. First determine whether JS is synchronous or asynchronous. If it is synchronous, it will enter the main process, if it is asynchronous, it will enter the event table

2. Asynchronous The task registers a function in the event table. When the triggering conditions are met, it is pushed into the event queue

3. The synchronization task is executed after entering the main thread. It will not go to the event queue to check whether it is until the main thread is idle. If there are executable asynchronous tasks, push them into the main process.

JS execution mechanism (2)

1. Execute a macro task. If a micro task is encountered during the process, Put it in the [Event Queue] of the microtask

2. After the current macro task is completed, the [Event Queue] of the microtask will be viewed, and all the microtasks in it will be executed in sequence

Task division method:

1.macro-task (macro task): script, setTimeout, setInterval

2.micro-task (micro task): Promise, process.nextTick

We start from a small question

for (var i=0;i<=5;i++){
    setTimeout(()=>{console.log(i)},1000)
}

The output result should be 6 consecutive 6's printed after 1 second. Although the main knowledge point of this question is block-level scope, it is very suitable for eliciting events. Polling mechanism. Because setTimeout is an asynchronous task, it will not be executed immediately. It needs to wait until all synchronous tasks are executed, that is, the for loop ends. When i becomes 6, it starts executing 6 timers at the same time. At this time, i points to the global value of 6. variable, so print 6, this is the JS execution mechanism (1)

Add a little more difficulty, consider the JS execution mechanism (2)

// promise里面的函数是立即执行的// 分别输出 2 3 5 4 1setTimeout(function () {
    console.log(1)
},0);new Promise(function executor(resolve) {
    console.log(2);    for(var i=0;i<10000;i++){
        i==9999 && resolve();
    }
    console.log(3);
}).then(function () {
    console.log(4);
});
console.log(5);

The first macro task executed first must be the script (script ), so the timer will be skipped (no matter how many seconds you delay the execution), and then execute the content in the Promise, in order, print 2 first, and then perform a for loop. resolve() is an asynchronous callback function and belongs to asynchronous execution. At the same time, as we mentioned in task division, Promise belongs to microtask, so the microtask event queue will be cleared after the macrotask ends, so 3, 5, and 4 will be printed next.
At this point, the first macro task has been processed, and then it is the timer's turn.

The above is the detailed content of JS event polling mechanism explained. For more information, please follow other related articles on the PHP Chinese website!