快捷導(dǎo)航

深入理解JS中的微任務(wù)和宏任務(wù)的執(zhí)行順序及應(yīng)用場(chǎng)景

更新時(shí)間：2023年05月06日 11:12:54 作者：suwu150

JavaScript中的任務(wù)分為宏任務(wù)和微任務(wù)，它們的執(zhí)行順序會(huì)影響代碼的執(zhí)行結(jié)果。了解它們的機(jī)制可以幫助我們更好地理解事件循環(huán)和異步編程，避免出現(xiàn)一些意想不到的錯(cuò)誤

微任務(wù)和宏任務(wù)的區(qū)別及具體場(chǎng)景

微任務(wù)和宏任務(wù)皆為異步任務(wù)，它們都屬于一個(gè)隊(duì)列，主要區(qū)別在于他們的執(zhí)行順序，Event Loop的走向和取值。

任務(wù)之間的一些劃分

概念

1.宏觀任務(wù)：當(dāng)前調(diào)用棧中執(zhí)行的代碼成為宏任務(wù)。（主代碼塊、setTimeout、setInterval、I/O、UI 交互事件、setImmediate等等）。

2.微觀任務(wù)：當(dāng)前（此次事件循環(huán)中）宏任務(wù)執(zhí)行完，在下一個(gè)宏任務(wù)開始之前需要執(zhí)行的任務(wù),可以理解為回調(diào)事件。（Promise.then、MutaionObserver、process.nextTick等等）。

3.宏任務(wù)中的事件放在callback queue中，由事件觸發(fā)線程維護(hù)；微任務(wù)的事件放在微任務(wù)隊(duì)列中，由js引擎線程維護(hù)。

任務(wù)之間的執(zhí)行順序

宏任務(wù)與微任務(wù)之間的執(zhí)行順序(同步任務(wù)->微任務(wù)->宏任務(wù))

到這里，必須得用代碼來舉個(gè)例子??給大家展示展示了。

// 代碼塊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');
});
//（對(duì)于這段代碼node環(huán)境和瀏覽器環(huán)境輸出一致）
//輸出答案：2,4,3,1,5,6,x1,x2,7,8,x3,x4,x5

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

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

那我們?cè)?宏任務(wù)2中的宏任務(wù) X3，X4,X5后面再添加一個(gè)宏任務(wù)，最終的結(jié)果會(huì)排列到后面執(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)用場(chǎng)景的文章就介紹到這了,更多相關(guān)JS中的微任務(wù)和宏任務(wù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: