我认为我们不能从堆栈中分离出来讨论事件循环,所以:
JS有三个“堆栈”:
所有同步调用的标准堆栈(一个函数调用另一个函数,等等)
微任务队列(或作业队列或微任务堆栈)用于所有具有更高优先级的异步操作(进程。nextTick,承诺,对象。观察,MutationObserver)
宏任务队列(或事件队列,任务队列,宏任务队列)用于所有低优先级的异步操作(setTimeout, setInterval, setimmediation, requestAnimationFrame, I/O, UI渲染)
|=======|
| macro |
| [...] |
| |
|=======|
| micro |
| [...] |
| |
|=======|
| stack |
| [...] |
| |
|=======|
事件循环是这样工作的:
执行栈中从下到上的所有操作,并且只有当栈为空时,才检查上面的队列中发生了什么
检查微堆栈并在堆栈的帮助下执行那里的所有内容(如果需要),一个微任务接一个微任务,直到微任务队列为空或不需要任何执行,然后才检查宏堆栈
检查宏堆栈并在堆栈的帮助下执行其中的所有内容(如果需要)
如果栈不为空,微栈将不会被触动。如果微堆栈不为空或不需要任何执行,宏堆栈将不会被触及。
综上所述:微任务队列与宏任务队列几乎相同,但这些任务(进程)和宏任务队列是相同的。nextTick,承诺,对象。observe, MutationObserver)的优先级高于宏任务。
微观就像宏观,但优先级更高。
这里有理解一切的“终极”代码。
console.log('stack [1]');
setTimeout(() => console.log("macro [2]"), 0);
setTimeout(() => console.log("macro [3]"), 1);
const p = Promise.resolve();
for(let i = 0; i < 3; i++) p.then(() => {
setTimeout(() => {
console.log('stack [4]')
setTimeout(() => console.log("macro [5]"), 0);
p.then(() => console.log('micro [6]'));
}, 0);
console.log("stack [7]");
});
console.log("macro [8]");
/* Result:
stack [1]
macro [8]
stack [7], stack [7], stack [7]
macro [2]
macro [3]
stack [4]
micro [6]
stack [4]
micro [6]
stack [4]
micro [6]
macro [5], macro [5], macro [5]
--------------------
but in node in versions < 11 (older versions) you will get something different
stack [1]
macro [8]
stack [7], stack [7], stack [7]
macro [2]
macro [3]
stack [4], stack [4], stack [4]
micro [6], micro [6], micro [6]
macro [5], macro [5], macro [5]
more info: https://blog.insiderattack.net/new-changes-to-timers-and-microtasks-from-node-v11-0-0-and-above-68d112743eb3
*/