foreword
JavaScript is a single-threaded weakly typed language, but in our development, we often encounter some processing operations that need to be asynchronous or awaited. Similar to ajax, or the new promise operation in ES6 is used to handle some callback functions, etc.
concept
In the process of JavaScript code execution, it can be divided into synchronous queue and asynchronous queue.
-
The synchronization task is similar to the immediate execution function that we often say. It can be performed directly without waiting, and can be directly executed in the main thread, similar to normal function calls.
-
An asynchronous queue is an asynchronous execution function, similar to an ajax request. In the process of initiating, we will enter an asynchronous queue. When loading into a task, we need to wait before processing the return value.
take a chestnut
In the following code, we can first understand some basic principles of the event loop mechanism
console.log('1');
setTimeout(function() {
console.log('4');
}, 0);
Promise.resolve().then(function() {
console.log('2');
}).then(function() {
console.log('3');
});
console.log('5');
We print the code to the console and the output is: 1, 5, 2, 3, 4
We know that in JavaScript, similar timers and the new promises of ES6 are asynchronous functions. Going back to the concept of queues we mentioned above, it is not difficult to draw out that 1 and 5 are synchronous execution queues.
After the code in the synchronous queue is executed, the code in the asynchronous queue is executed.
TIP
In parsing the promise and timer of the asynchronous queue, we found that the timer setTimeout is executed after the promise . Here we introduce the macro task** (Macro Task**) and micro task** (Micro Task)* in the JavaScript specification. *the concept of
In JavaScript, macro tasks include: script (overall code), setTimeout, setInterval, I/O, UI interaction events, setImmediate (Node.js environment)
Micro tasks: Promise, MutaionObserver, process.nextTick (Node.js environment)
Going back to the above problem of timers and promises, at this time we know that in JavaScript, when there is an asynchronous queue, micro-tasks are executed first, and then macro-tasks are executed
give a chestnut again
If there is an asynchronous queue in the asynchronous queue, what do we need to do?
console.log(1);
setTimeout(function() {
console.log(5);
}, 10);
new Promise(resolve => {
console.log(2);
resolve();
setTimeout(() => console.log(3), 10);
}).then(function() {
console.log(4);
})
console.log(6);
Execute the code into the console, and the resulting print order is: 1,2,6,4,5,3
-
Different from the promise in example 1, print 2 is executed in priority to 6, so we can know that during the execution of new Promise, the code executed before resolve or reject is executed is the code in the synchronization queue.
-
Looking at the execution order of 4, 5, and 3, after executing the microtask promise and executing the callback resolve, the corresponding then is executed immediately
-
In the print result, timer 5 is preferentially executed in ----> the macro task timer 3 belonging to the micro task promise. The macro task of timer 5 is added after the queue of the promise micro task, and the execution of the promise is completed. After the then callback, the macro task in the promise is added to the queue, so it is executed after timer 5
Summarize
In JavaScript, macro tasks include: script (overall code), setTimeout, setInterval, I/O, UI interaction events, setImmediate (Node.js environment)
Micro tasks: Promise, MutaionObserver, process.nextTick (Node.js environment);
During the execution process, the synchronization code takes precedence over the code in other task queues, tasks such as timers and promises. During the execution process, it will be added to the queue first, and after the synchronization code is executed, it will be classified according to the macro tasks and micro tasks. , execute the micro-task queue first, and then execute the macro-task queue.
Article personal blog address: JavaScript event loop mechanism