宏任务与微任务
在js中事件执行顺序依次为
1、事件总栈中的同步任务
2、事件总栈异步任务
2.1、异步任务中的微任务
2.2、异步任务中的宏任务
常见的微任务
常见的微任务包括: promise 的回调(一定是回调!)、node 中的 process.nextTick 、对 Dom 变化监听的MutationObserver。
常见的宏任务
常见的宏任务包括: script 脚本的执行、setTimeout ,setInterval ,setImmediate 一类的定时事件,还有如 I/O 操作、UI 渲染等。
在代码输出题中练习
const promise = new Promise((resolve, reject) => {
console.log(1);
resolve();
console.log(2);
})
promise.then(() => {
console.log(3);
})
console.log(4);
结果:// 答案 1 2 4 3 promise.then 进入宏队列 1和2 没有在promise的回调,在事件总栈执行
const promise = new Promise((resolve, reject) => {
console.log(1);
setTimeout(()=>{
console.log(2);
resolve();
console.log(3);
})
})
promise.then(() => {
console.log(4);
})
console.log(5);
//答案 1,5,2,3,4 因为1没有在promise的回调中,所以和5一起在事件总栈就执行;setTimeout是微任务,promise是宏任务,所以2和3在4之前执行
async function m(){
const n = await 1;
console.log(n);
}
m();
console.log(2);
//答案 2 1 async和await作为处理异步函数的语法糖 用async标志的函数在异步栈执行,console.log(2)在事件总栈中执行
var a;
var b = new Promise((resolve, reject) => {
console.log('promise1');
setTimeout(()=>{
resolve();
}, 1000);
}).then(() => {
console.log('promise2');
}).then(() => {
console.log('promise3');
}).then(() => {
console.log('promise4');
});
a = new Promise(async (resolve, reject) => {
console.log(a);
await b;
console.log(a);
console.log('after1');
});
console.log('end');
//答案 promise1,undefined,end,promise2,promise3,promise4,Promise { } ,after1