宏任务与微任务

描述

• 宏任务包括：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 3 5 4 2

• 实例1的流程如下

1. 开始
2. 主线程，打印 1
3. 将 timmer1 放入任务队列 A
4. 主线程，func1 本身为同步事件，打印 3
5. func1.then 为异步事件，将事件放入任务队列 A
6. 主线程，打印 5
7. 当前主线程结束，开始读取任务队列 A
8. 当前任务队列 A：timmer1、func1.then
9. 按照顺序，先执行微任务，再执行宏任务
10. 执行 func1.then，打印 4
11. 当前任务队列 A：timmer1
12. 当前任务队列，微任务已经全部执行完毕，开始执行宏任务
13. 执行 timmer1，打印 2
14. 结束

实例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 1 3 4 5 2

• 实例2的流程如下

1. 开始
2. 主线程，打印 6
3. 将 timmer1 放入任务队列 A
4. 将 timmer3 放入任务队列 A
5. 当前主线程结束，开始读取任务队列 A
6. 当前任务队列 A：timmer1、timmer3
7. 按照顺序，先执行微任务，再执行宏任务
8. 当前队列没有微任务，开始按顺序执行宏任务
9. 执行 timmer1，打印 1
10. 将 timmer2 放入任务队列 A
11. 执行 func1，打印 3
12. 将 func1.then 放入任务队列 A
13. 当前任务队列 A：timmer3、timmer2、func1.then
14. 按照顺序，先执行微任务，再执行宏任务
15. 执行 func1.then，打印 4
16. 当前任务队列，微任务已经全部执行完毕，开始按顺序执行宏任务
17. 执行 timmer3，打印 5
18. 执行 timmer2，打印 2
19. 结束

实例3

async function func1(){console.log('1');await func2(); // await 后面的内容，相当于 promise.then 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');
});
// 1 3 4 5 2 6

• 实例3的流程如下

1. 开始
2. 主线程，执行 func1，打印 1
3. 执行 func2，打印 3
4. 将 await 所在作用域内，后面的所有内容放入任务队列 A
5. 主线程，打印 4
6. 主线程，执行 func3，打印 5
7. 将 func3.then 放入任务队列 A
8. 当前主线程已执行完毕，开始读取任务队列 A
9. 当前任务队列 A：await、func3.then
10. 按照顺序，先执行微任务，再执行宏任务
11. 执行 await 作用域内后边的事件，打印 2
12. 执行 func3.then，打印 6
13. 结束