Execution sequence of event loop (Event Loop) in javascript

The content of this article is about the execution sequence of the event loop (Event Loop) in JavaScript. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Brief introduction: Talk about the execution order of promise.resove, setTimeout, setImmediate, process.nextTick in the EvenLoop queue

Source of the problem

Event loop is familiar to everyone. It refers to the main thread reading tasks cyclically from the "task queue", such as

例1：

setTimeout(function(){console.log(1)},0);

console.log(2)

//输出2,1

In the above example, we understand that the synchronization task in the main thread is first executed, and when the main thread After the thread task is executed, the task is read from the event loop, so 2 is output first, and then 1 is output.

The order in which the event loop reads tasks depends on the restrictions on different task reading rules in the task queue (Job queue). For example, in the following example:

例2：

setTimeout(function () {
  console.log(3);
}, 0);

Promise.resolve().then(function () {
  console.log(2);
});
console.log(1);
//输出为  1  2 3

Output 1 first, there is no problem, because the synchronization task is executed first in the main thread. The problem here is how the execution priority of the setTimeout and Promise.then tasks is defined.

Execution order

The queue in the Job queue is divided into two types: macro-task and microTask. Let's take an example to look at the regulations of the execution order. Let's assume that the execution order of

macro-task队列包含任务: a1, a2 , a3
micro-task队列包含任务: b1, b2 , b3

is: first execute the task at the beginning of the marco-task queue, which is the a1 (a1 represents the main task of synchronization) task. After the execution is completed, Execute all tasks in the micro-task queue, that is, execute b1, b2, b3 (asynchronously) in sequence. After execution, clear the tasks in the micro-task, and then execute marco- The second task (asynchronous) in task, loops in sequence.

After understanding the execution order of macro-task and micro-task queues, let’s look at the tasks actually included in these two types of queues in real scenarios (we take the node V8 engine as an example ), in node V8, the real task order of these two types is as follows:

macro-task queue actually contains tasks:

script(主程序代码)[对应上方的a1],setTimeout, setInterval, setImmediate, I/O, UI rendering

micro-task queue actually contains tasks:

process.nextTick, Promises, Object.observe, MutationObserver

The execution order we get from this should be:

script(主程序代码)—>process.nextTick—>Promises...——>setTimeout——>setInterval——>setImmediate——> I/O——>UI rendering

In ES6, the macro-task queue is also called ScriptJobs, and the micro-task is also called PromiseJobs

Example

(1) setTimeout and promise

例3:

setTimeout(function () {
  console.log(3);
}, 0);

Promise.resolve().then(function () {
  console.log(2);
});

console.log(1);

(2) process.nextTick and promise, setTimeout

例子4：
setTimeout(function(){console.log(1)},0);

new Promise(function(resolve,reject){
   console.log(2);
   resolve();
}).then(function(){console.log(3)
}).then(function(){console.log(4)});

process.nextTick(function(){console.log(5)});

console.log(6);
//输出2,6,5,3,4,1

(3) More complex examples

setTimeout(function(){console.log(1)},0);

new Promise(function(resolve,reject){
   console.log(2);
   setTimeout(function(){resolve()},0)
}).then(function(){console.log(3)
}).then(function(){console.log(4)});

process.nextTick(function(){console.log(5)});

console.log(6);

//输出的是  2 6 5 1 3 4

These examples Please judge the reasons according to the execution order. I will not explain them one by one here

The above is the detailed content of Execution sequence of event loop (Event Loop) in javascript. For more information, please follow other related articles on the PHP Chinese website!