描述
- 宏任务包括:setTimeout、setInterval、ajax、DOM 事件
- 微任务包括:promise、async+await
- 在 js 事件循环中,异步事件任务队列,先执行微任务(Jobs),再执行宏任务(Task)
实例1
console.log('1');
let timmer1 = setTimeout(()=>{
console.log('2');
}, 0);
let func1 = new Promise((resolve, reject)=>{
console.log('3');
resolve();
}).then(()=>{
console.log('4');
});
console.log('5');
- 开始
- 主线程,打印 1
- 将 timmer1 放入任务队列 A
- 主线程,func1 本身为同步事件,打印 3
- func1.then 为异步事件,将事件放入任务队列 A
- 主线程,打印 5
- 当前主线程结束,开始读取任务队列 A
- 当前任务队列 A:timmer1、func1.then
- 按照顺序,先执行微任务,再执行宏任务
- 执行 func1.then,打印 4
- 当前任务队列 A:timmer1
- 当前任务队列,微任务已经全部执行完毕,开始执行宏任务
- 执行 timmer1,打印 2
- 结束
实例2
let timmer1 = setTimeout(()=>{
console.log('1');
let timmer2 = setTimeout(()=>{
console.log('2');
}, 0);
let func1 = new Promise((resolve, reject)=>{
resolve();
console.log('3');
}).then(()=>{
console.log('4');
});
},0);
let timmer3 = setTimeout(()=>{
console.log('5');
});
console.log('6');
- 开始
- 主线程,打印 6
- 将 timmer1 放入任务队列 A
- 将 timmer3 放入任务队列 A
- 当前主线程结束,开始读取任务队列 A
- 当前任务队列 A:timmer1、timmer3
- 按照顺序,先执行微任务,再执行宏任务
- 当前队列没有微任务,开始按顺序执行宏任务
- 执行 timmer1,打印 1
- 将 timmer2 放入任务队列 A
- 执行 func1,打印 3
- 将 func1.then 放入任务队列 A
- 当前任务队列 A:timmer3、timmer2、func1.then
- 按照顺序,先执行微任务,再执行宏任务
- 执行 func1.then,打印 4
- 当前任务队列,微任务已经全部执行完毕,开始按顺序执行宏任务
- 执行 timmer3,打印 5
- 执行 timmer2,打印 2
- 结束
实例3
async function func1(){
console.log('1');
await func2();
console.log('2');
}
function func2(){
console.log('3');
};
func1();
console.log('4');
let func3 = new Promise((resolve, reject)=>{
console.log('5');
resolve();
}).then(()=>{
console.log('6');
});
- 开始
- 主线程,执行 func1,打印 1
- 执行 func2,打印 3
- 将 await 所在作用域内,后面的所有内容放入任务队列 A
- 主线程,打印 4
- 主线程,执行 func3,打印 5
- 将 func3.then 放入任务队列 A
- 当前主线程已执行完毕,开始读取任务队列 A
- 当前任务队列 A:await、func3.then
- 按照顺序,先执行微任务,再执行宏任务
- 执行 await 作用域内后边的事件,打印 2
- 执行 func3.then,打印 6
- 结束