宏任务与微任务

描述

  • 宏任务包括: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. 结束

你可能感兴趣的:(知识点,javascript,前端,开发语言)