setTimeout与异步Promise执行顺序问题

执行顺序问题

首先需要区分宏任务与微任务：

​ 宏任务：同步任务，I/O（比如读写文件），setTimeout()，setInterval()，requestAnimationFrame()等

​ 微任务：Promise.then/catch/finally，generator，async / await，MutationObserver等

在某一个宏任务执行完毕后，会先查看微任务事件队列当中是否有任务，有就执行微任务，然后才是宏队列。

比如下面的例子，这也是一道面试题，让你说出执行顺序。

    setTimeout(function() {
      console.log(1)
    }, 0);
    new Promise(function executor(resolve) {
      console.log(2);
      for( var i=0 ; i<10000 ; i++ ) {
        i == 9999 && resolve();
      }
      console.log(3);
    }).then(function() {
      console.log(4);
    });
    console.log(5);

这样一堆确实很懵逼，毕竟自己也不会…

解答：

​ 首先，setTimeout是一个宏任务，扔到了异步宏任务队列当中。代码向下执行

​ 其次遇到 new Promise() 当中的传入一个函数function executor是一个函数所以会立即执行，===> 2

​ 继续向下执行遇到 for 循环，不管他执行多少次，i= 9999的时候，执行resolve()，此时将 then 放到了异步微任务队列当中

​ 向下执行遇到console.log(3) ====> 3

​ 因为同步任务还未走完，继续向下执行console.log(5) ， ====> 5

​ 当同步的宏任务执行完毕后，会先查看微任务队列当中有无需要执行的，此时之前扔进去的resolve()，也就是then，这个时候就会执行 console.log(4) ====> 4

​ 然后微任务队列执行完毕后，再去执行宏任务队列。此时setTimeout()才会执行 ====> 1

如下图结果所示：

结果所示：（至于undefinied，语句执行完成后一般都会有这个）
例如：