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

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

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

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

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

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

您可能感興趣的文章: