// 代碼塊1
setTimeout(function() {   //宏任務1
  console.log('1');
});
new Promise(function(resolve) {
  console.log('2'); //同步任務1
  resolve();
}).then(function() {   //微任務1
  console.log('3');
});
console.log('4'); //同步任務2
// 代碼塊2
setTimeout(function() {   //宏任務2
  console.log('5'); //宏任務2中的同步任務
  new Promise(function(resolve) {
    console.log('6'); //宏任務2中的同步任務
    new Promise(function(resolve) {      //宏任務2中的微任務
      console.log('x1');
      resolve();
    }).then(function() {
      console.log('X2');
    });
    setTimeout(function() {       //宏任務2中的宏任務
      console.log('X3');
      new Promise(function(resolve) {         //宏任務2中的宏任務中的同步任務
        console.log('X4');
        resolve();
      }).then(function() {        //宏任務2中的宏任務中的微任務
        console.log('X5');
      });
    });
    resolve();
  }).then(function() {    //宏任務2中的微任務
    console.log('7');
  });
});
// 代碼塊3
setTimeout(function() {  //宏任務3
  console.log('8');
});
//（對于這段代碼node環(huán)境和瀏覽器環(huán)境輸出一致）
//輸出答案：2,4,3,1,5,6,x1,x2,7,8,x3,x4,x5

運行完結(jié)果，機智寶寶難免會想為什么答案會是這樣的呢，按照同步任務->微任務->宏任務的執(zhí)行順序去檢查，會慢慢深入人心的。

比較難理解的應該是代碼塊2，同步執(zhí)行的按順序執(zhí)行就好了，在輸出同步任務X1，輸出微任務X2后，因為setTimeout又是一個宏任務，所以會被排到所有的宏任務之后，所以就會在7，8的后面出現(xiàn)打印。

那我們在宏任務2中的宏任務 X3，X4,X5后面再添加一個宏任務，最終的結(jié)果會排列到后面執(zhí)行

setTimeout(function() {   //宏任務2
  console.log('5'); //宏任務2中的同步任務
  new Promise(function(resolve) {
    console.log('6'); //宏任務2中的同步任務
    new Promise(function(resolve) {      //宏任務2中的微任務
      console.log('x1');
      resolve();
    }).then(function() {
      console.log('X2');
    });
    setTimeout(function() {       //宏任務2中的宏任務
      console.log('X3');
      new Promise(function(resolve) {         //宏任務2中的宏任務中的同步任務
        console.log('X4');
        resolve();
      }).then(function() {        //宏任務2中的宏任務中的微任務
        console.log('X5');
      });
    });
   setTimeout(function() {       //宏任務2中的宏任務
      console.log('X6');
      new Promise(function(resolve) {         //宏任務2中的宏任務中的同步任務
        console.log('X7');
        resolve();
      }).then(function() {        //宏任務2中的宏任務中的微任務
        console.log('X8');
      });
    });
    resolve();
  }).then(function() {    //宏任務2中的微任務
    console.log('7');
  });
});
// 5,6,X1,X27,X3,X4,X5,X6,X7,X8

到此這篇關于深入理解JS中的微任務和宏任務的執(zhí)行順序及應用場景的文章就介紹到這了,更多相關JS中的微任務和宏任務內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: