微任务和宏任务哪个先执行?

zz888888888

已于 2023-07-07 16:32:54 修改

阅读量5.7k

点赞数 8

分类专栏：面试文章标签： javascript 前端

于 2023-01-31 11:38:31 首次发布

本文链接：https://blog.csdn.net/qq_59737146/article/details/128814404

版权

面试专栏收录该内容

22 篇文章 0 订阅

订阅专栏

先说一下事件循环：

先执行宏任务，再检查有没有微任务，如果有就执行微任务，然后渲染dom，最后进入下一次事件循环。

更官方的解释：先执行同步代码,遇到异步宏任务则将异步宏任务放入宏任务队列中,遇到异步微任务则将异步微任务放入微任务队列中,当所有同步代码执行完毕后,再将异步微任务从队列中调入主线程执行,微任务执行完毕后再将异步宏任务从队列中调入主线程执行,一直循环直至所有任务执行完毕。

为什么有人认为微任务先执行?

     setTimeout(() => {
      console.log("宏任务");
    }, 0);
    Promise.resolve().then((e) => {
      console.log("微任务");
    });

因为上面的代码会先输出微任务，再输出宏任务，

这是因为宏任务试下一个时间循环开始的宏任务，而微任务是这次事件循环就执行的微任务，他们之间隔了一个dom渲染，所以造成了微任务比宏任务更快执行的错觉。

举个栗子

例题1

setTimeout(function(){
    console.log('1')
});
new Promise(function(resolve){
    console.log('2');
    resolve();
}).then(function(){
    console.log('3')
});
console.log('4');
new Promise(function(resolve){
    console.log('5');
    resolve();
}).then(function(){
    console.log('6')
});
setTimeout(function(){
    console.log('7')
});
function bar(){
    console.log('8')
    foo()
}
function foo(){
    console.log('9')
}
console.log('10')
bar()

解析

首先浏览器执行Js代码由上至下顺序，遇到setTimeout，把setTimeout分发到宏任务Event Queue中
new Promise属于主线程任务直接执行打印2
Promis下的then方法属于微任务，把then分到微任务 Event Queue中
console.log(‘4’)属于主线程任务，直接执行打印4
又遇到new Promise也是直接执行打印5，Promise 下到then分发到微任务Event Queue中
又遇到setTimouse也是直接分发到宏任务Event Queue中，等待执行
console.log(‘10’)属于主线程任务直接执行
遇到bar()函数调用，执行构造函数内到代码，打印8，在bar函数中调用foo函数，执行foo函数到中代码，打印9
主线程中任务执行完后，就要执行分发到微任务Event Queue中代码，实行先进先出，所以依次打印3，6
微任务Event Queue中代码执行完，就执行宏任务Event Queue中代码，也是先进先出，依次打印1，7。

最终结果：2，4，5，10，8，9，3，6，1，7

例题2

    setTimeout(() => {
      console.log('1');
      new Promise(function (resolve, reject) {
        console.log('2');
        setTimeout(() => {
          console.log('3');
        }, 0);
        resolve();
      }).then(function () {
        console.log('4')
      })
    }, 0);
    console.log('5'); //5 7 10 8 1 2 4 6 3
    setTimeout(() => {
      console.log('6');
    }, 0);
    new Promise(function (resolve, reject) {
      console.log('7');
      // reject();
      resolve();
    }).then(function () {
      console.log('8')
    }).catch(function () {
      console.log('9')
    })
    console.log('10');

执行结果: 5 7 10 8 1 2 4 6 3