Detailed analysis of understanding JavaScript event mechanism

This article brings you a detailed analysis of understanding the JavaScript event mechanism. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Divided according to synchronization and asynchronousness

• 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

• The asynchronous task registers the function in the event table. When the trigger condition is met, it is pushed into the event queue

• The synchronous task enters the main thread and is executed until the main thread is idle. , will go to the event queue to see if there are executable asynchronous tasks. If there are, push them into the main process

Divided into macro tasks and micro tasks (more accurate)

• macro-task (macro task): including the overall code script, setTimeout, setInterval, setImmediate, I/O, UI rendering

• ##micro-task( Microtask): Promise.then, process.nextTick

Many places mark Promise as a microtask, but this can easily make people mistakenly think that the process is a microtask when a new Promise is issued. In fact, Promsie.then and Promise.catch are microtasks. New Promise is treated as an ordinary generated object, so here I mark it as Promise.then

• Execute this round of macro tasks

• If you encounter a microtask during the process, if it is a synchronous task, put it in the [Event Queue] of the microtask, and put it asynchronously in the [Event Table] of the microtask. Register the function, meet the execution conditions, and push it into the microtask [event queue] (so far I don’t know if microtasks have asynchronous tasks)

• When encountering a macro task, it is a synchronous task. Put it into the [Event Queue] of the macro task, asynchronously put it into the [Event Table] of the macro task, register the function, meet the execution conditions, and push it into the macro task [Event Queue]

• After this round of macro tasks is executed, check the [Event Queue] of the micro tasks, and execute all the micro tasks in sequence, and execute the next round of macro tasks from the macro tasks [Event Queue]

• JS single thread, there is only one unique event loop in this thread

• In one thread , the event loop is unique, but there can be multiple task queues (there is only one micro-task queue)

• The task queue is divided into macro-task queue and micro-task queue

Then the question is, when there are multiple macro task queues, which macro task should be selected for the next trip? In the above method, I regard all macro tasks as a queue

/* example1 */
setTimeout(function () {
    console.log(1);
},7);

new Promise(function (resolve) {
    console.log(2);
    for (var i = 0; i < 10000; i++) {
        i == 99 && resolve();
    }
}).then(function () {
    console.log(3);
    setTimeout(() => {
        console.log(4);
    });
})

console.log(5);
// 2 3 5 （4 7） 后两个数字的顺序与两定时器的delayTime有关，谁先满足触发条件就先输出谁 （html5 标准中，规定delayTime >= 4ms）

/* example2 */
setTimeout(_ => console.log(4));

new Promise(resolve => {
    resolve()
    console.log(1)
}).then(_ => {
    console.log(3)
    Promise.resolve().then(_ => {
        console.log('before timeout')
    }).then(_ => {
        Promise.resolve().then(_ => {
            console.log('also before timeout')
        })
    })
})

console.log(2);
// 这个也不难，分析分析就出结果了

Copy after login

• Are there asynchronous tasks in the microtask event queue?

• There are multiple macrotask event queues. Which macrotask event queue should be taken from for the next round of macrotask?

Details on the JavaScript event loop mechanism - Lecture 2

JavaScript running mechanism events and callback functions

The above is the detailed content of Detailed analysis of understanding JavaScript event mechanism. For more information, please follow other related articles on the PHP Chinese website!