前端 每日一道面试题（5）

哒哒哒！！！ 小伙伴期待的每日面试题又来了哟~

阅读下面代码，我们只考虑浏览器环境下的输出结果，写出它们结果打印的先后顺序，并分析出原因，小伙伴们，加油哦

new Promise((resolve, reject) => {
    console.log("A");
    setTimeout(() => {
        console.log("B");
    },0);
    console.log("C");
    resolve();
    console.log("D");
   })
   .then(() => {
      console.log("E");
      new Promise((resolve, reject) => {
          console.log("F");
          resolve();
          console.log("G");
        })
        .then(() => {
            setTimeout(() => {
                console.log("H");
            },0 ) ;
            console.log("I");
        })
        .then(() => {
            console.log("J");
        });
    })
    .then(() => {
        console.log("K");
    }); 
    setTimeout(() => {
        console.log("L");
    }, 0); 


new Promise((resolve, reject) => {
    console.log("M");
    resolve();
}).then(() => {
        setTimeout(() => {
            new Promise((resolve, reject) => {
                console.log("N");
                resolve();
            })
            .then(() => {
                setTimeout(() => {
                    console.log("O");
                },0);
            })
            .then(() => {
                console.log("P");
                });
        }, 0);
    }); 

console.log("Q");

解析:
首先，我们要知道微任务会先于宏任务执行。知道了这一点，我们来看下面的代码。
还是先看最外层的结构，Promise类–定时器- Promise类- console.log。先执行同步代码，打印出第一个 Promise类里面的A、C、D，第一个Promise里面的定时器进去宏任务列表,排在第一位。这个 Promise产生的微士务进入第一轮微任务列表，排在第一位。最外层定时器进入宏任务列表，排在第二位。打印第二个Promise类里面的M,第二个Promise 产生的微任务进入第一轮微任务列表，排在第二位。最后执行console.log(“Q”)，打印出Q

​ 微任务会先于宏任务执行，所以先执行第一个Promise的第一个then,打印E、 F、 。1亿-个then里面又生成了一个新的Promise类,同理,新Promise产生的微任务进入第二轮微任务列表，排在第一位。then会返回一个Promise类，也就是说这个then也会产生一个微任务，进入到第二轮微任务列表，排在第二位。接下来执行第二个Promise的第一个then，这个then里面是一个定时器，进入到宏任务列表，排在第三位。本轮微任务结束。

​ 第二轮微任务，先执行第一个Promise的第一个then里面的Promise类的第一个then,then里面的定时器进入宏任务列表，排在第四位，执行console.log(“I”’)，打印I。这个then返回的 Promise类生成的微任务进入到第三轮的微任务列表中，排在第一位。继续执行第一个Promise的第二个then，打印K。本轮微任务结束。

​ 第三轮微任务，执行第一个Promise的第一个then里面的 Promise类的第二个then，打印J。执行到这里，微任务已经全部执行完毕，开始执行宏任务。

​ 执行第一个Promise里面的定时器，打印B。执行最外层的定时器，打印L。执行第二个Promise的第一个then里面的定时器，生成一个新的Promise类，打印这个 Promise类里面的N，生成一个微任务，加入到微任务列表中。执行到这里，宏任务列表里面还有一个任务未执行，由于微任务会先于宏任务执行，所以宏任务会暂停执行，先执行微任务。

​ 执行的是第二个Promise的 then里面的Promise的第一个then，这个then里面是定时器，加入到宏任务列表里面，排在第二位。这个then返回的Promise生成一个微任务，进入下一轮的微任务列表。

​ 执行第二个Promise的 then里面的Promise的第二个then，打印P。执行到这里，微任务已经全部执行完毕，开始执行宏任务。

​ 执行第一个 Promise的第一个then里面的Promise类的第一个then里面的定时器，打印H。
​ 最后执行第二个Promise 的 then里面的Promise类的第一个then里面的定时器，打印O。

最后的打印顺序为:A C D M Q E F G I K J B L N P H O

喜欢的记得 点赞！ 收藏哟~