?node环境
Event Loop各阶段:
nextTick会在当前阶段执行完马上执行。
nextTick 既属于宏任务也属于微任务,主要是由他的实现方式决定的。 nexTick 实现方式是 promise,属于微任务,但是由于 IE 浏览器没有 promise,所以使用定时器的方式实现的,这又属于宏任务了。一般情况是微任务。
setImmediate是宏任务,只不过是比setTimeout要更快执行的宏任务。
主要记住三个阶段:
eventloop会在不停的循环执行这些阶段,当没有任务时,它会停留在poll阶段。实际上,大部分时间是停留在poll阶段的,因此setImmediate往往会优先于setTimeout先执行。
console.log('1');
setTimeout(() => {
console.log('3');
}, 0);
async function async1() {
console.log('4');
await async2();
console.log('5');
}
async function async2() {
console.log('6');
}
async1();
new Promise(function(resolve) {
console.log('7')
resolve();
}).then(function() {
console.log('8')
});
process.nextTick(function() {
console.log('2');
});
console.log('9');
// 微任务队列 5 8
// 宏任务队列 3
// nextTick是当前阶段尾部,process.nextTick是在当前同步代码中调用的,也就是说同步代码执行完
// 会立即执行nextTick,打印出2
// 1 4 6 7 9 2 5 8 3
浏览器环境
在浏览器环境中只需要区分宏任务和微任务即可,微任务如promise由于宏任务setTimeout先执行,注意new Promise()是立即同步执行的,只有promise.then()里的内容是微任务。如果遇到await写法,可以改写为promise.then()然后来判断。
await是一个语法糖,await后面是一个返回promise的函数,如果函数里没有返回promise,它会自动封装为一个返回promise的函数。
简单来说,宏任务是一会儿执行的,微任务是马上执行的,执行顺序显而易见。
async function foo() {
console.log('foo')
}
async function bar() {
console.log('bar start')
await foo()
console.log('bar end')
}
console.log('script start')
setTimeout(function () {
console.log('setTimeout')
}, 0)
bar();
new Promise(function (resolve) {
console.log('promise executor')
resolve();
}).then(function () {
console.log('promise then')
})
console.log('script end')
// 微任务 马上: bar end、promise then、
// 宏任务 一会儿: setTimeout、
/*
script start
bar start
foo
promise executor
script end
bar end
promise then
setTimeout、
*/