One of the things we know about JavaScript is the single thread, which has only one event loop in it. During the execution of JavaScript code, in addition to relying on the function call stack to handle the execution order of functions, the task queue is also relied upon to handle other code execution.
Queue data structure in one thread, the event loop is unique, but the task queue can have multiple. Task queues are divided into Macro-task (macro tasks) and Micro-task (micro-tasks), which, in the latest standard, are called task and jobs respectively. Macro-task probably includes: script (whole code), settimeout, SetInterval, setimmediate, I/O, UI rendering. Micro-task probably include: Process.nexttick, Promise, Object.observe (OBSOLETE), Mutationobserver (HTML5 new features) settimeout/ Promise and so on we call the task source. And the task queues are the specific tasks they specify. Execution order of macro task queues: script (overall code)->settimeout (SetInterval homology)->setimmediate
Order of execution of the micro-task queues: process.nexttick->promise (then)
The execution of the settimeout task is still done with the function call stack, and tasks are distributed to the corresponding queues when the task dispatcher is encountered.
The execution of a micro-task queue is performed only once all the tasks in settimeout have been completed. and empty all the executable micro-tasks.
After the settiemout queue has finished executing the micro task, the loop returns to the execution of the setimmediate queue. Still, the tasks in the Setimmediate queue are completed before the resulting micro task is executed.
When the Setimmediate queue executes the resulting micro-tasks, the second-round loop is over.
You need to pay attention to the time node at the end of the loop here.
When we encounter settimeout in the execution of the settimeout task, it still distributes the corresponding task to the settimeout queue, but the task waits until the next round of event loop executes. The example does not involve such a complex nesting, you can add or modify their position to feel the cycle of change.
Example1:
Console.log (' golb1 ');
settimeout (function () {console.log (' timeout1 ');
Process.nexttick (function () {console.log (' Timeout1_nexttick ');
New Promise (function (resolve) {console.log (' timeout1_promise ');
Resolve (); }). Then (function () {console.log (' Timeout1_then ')}) setimmediate (function () {Console.log (' immediate1
');
Process.nexttick (function () {console.log (' Immediate1_nexttick ');
New Promise (function (resolve) {console.log (' immediate1_promise ');
Resolve (); }). Then (function () {console.log (' Immediate1_then ')}) Process.nexttick (function () {Console.log (' Glob
1_nexttick ');
New Promise (function (resolve) {console.log (' glob1_promise ');
Resolve ();
}). Then (function () {console.log (' Glob1_then ')}) settimeout (function () {console.log (' timeout2 ');
Process.nexttick (function () {console.log (' Timeout2_nexttick '); }) New Promise (fUnction (Resolve) {console.log (' timeout2_promise ');
Resolve (); }). Then (function () {console.log (' Timeout2_then ')}) Process.nexttick (function () {Console.log (' glob2_
Nexttick ');
New Promise (function (resolve) {console.log (' glob2_promise ');
Resolve ();
}). Then (function () {console.log (' Glob2_then ')}) setimmediate (function () {console.log (' immediate2 ');
Process.nexttick (function () {console.log (' Immediate2_nexttick ');
New Promise (function (resolve) {console.log (' immediate2_promise ');
Resolve (); }). Then (function () {console.log (' Immediate2_then ')})})
Example2:
settimeout (function () {
console.log (1);
settimeout (function () {
console.log (2);
}, 0);
Process.nexttick (function () {
console.log (5);
Process.nexttick (function () {
console.log (6);}
);
};
}, 0)
; Process.nexttick (function () {
console.log (3);
Process.nexttick (function () {
console.log (4);
});
settimeout (function () {
console.log (7);
}, 0);
});
Results: 3 4 1 7 5 6 2
Reference article: http://www.jianshu.com/p/12b9f73c5a4f