Schematic diagram
Asynchronously executed callback functions have a common feature: they will be put in the queue at the right time. Let’s take a look at which kinds of callback functions are placed in the macro queue and which are placed in the micro queue
Each callback in the macro queue is called a macro task, and each callback in the micro queue is called a micro task
-
Macro queue: used to store macro tasks to be executed (callback)
- dom event callback
- ajax callback
- Timer callback
-
Micro queue: used to store micro tasks to be executed (callback)
- promise callback
- mutation callback
setTimeout(() => {
// 会立即放入宏队列
console.log("timeout callback");
}, 0);
Promise.resolve(1).then(
value => {
// 会立即放入微队列
console.log('Promise onResolved()', value);
}
)
You can see that the following promise is executed first, and then executed after settimeout
Add one more? ?
setTimeout(() => {
// 会立即放入宏队列
console.log("timeout callback 1");
}, 0);
setTimeout(() => {
// 会立即放入宏队列
console.log("timeout callback 2");
}, 0);
Promise.resolve(1).then(
value => {
// 会立即放入微队列
console.log('Promise onResolved1()', value);
}
)
Promise.resolve(2).then(
value => {
// 会立即放入微队列
console.log('Promise onResolved2()', value);
}
)
You can see that the promise is executed first, and the execution is executed after settimeout
JS engine is single-threaded execution, single-threaded execution means that only one thing can be done at a certain point in time. In other words, its basic overall process is divided into two steps:
- First execute all the synchronization code
- Then execute the callback function in the queue
There is another possibility that the initialization synchronization code has not been executed yet, and there is a callback function in the queue. But the callback function in the queue will not be executed, because there is only one line ( the callback function in the queue can only be executed after all the synchronization code is executed )
When executing the callback function in the queue, execute the micro queue first and then execute the macro queue
When JS is executed, these two queues are distinguished:
- The JS engine must first execute all the initialization synchronization code
- Every time you prepare to take out the first macro task for execution, take out all the micro tasks one by one to execute
How to understand the above sentence? Code look
setTimeout(() => {
// 会立即放入宏队列
console.log("timeout callback 1");
Promise.resolve(3).then(
value => {
// 会立即放入微队列
console.log('Promise onResolved3()', value);
}
)
}, 0);
setTimeout(() => {
// 会立即放入宏队列
console.log("timeout callback 2");
}, 0);
Promise.resolve(1).then(
value => {
// 会立即放入微队列
console.log('Promise onResolved1()', value);
}
)
Promise.resolve(2).then(
value => {
// 会立即放入微队列
console.log('Promise onResolved2()', value);
}
)
Description:
You can see the implementation of the first Promise onResolved1()and Promise onResolved2()two micro-tasks, and then to execute the macro task timeout callback 1, then found a macro task contains a micro-task Promise onResolved3(), so the first implementation of this micro-task Promise onResolved3()after task to go to the next macrotimeout callback 2