1. 程式人生 > 實用技巧 >js中的巨集任務和微任務

js中的巨集任務和微任務

js中的巨集任務和微任務

非同步和同步都是在完成任務列的內容

同步任務是逐條進行的,非同步任務有固定時間和非固定時間的

固定時間的非同步:setTimeout setInterval requestAnimationFrame(幀時間固定) Promise 非固定時間的:載入檔案和載入圖片,通訊

固定時間的非同步中:setTimeOut setInterval 巨集任務 Promise 微任務

巨集任務的執行:巨集任務指將當前的任務挪至下一個任務列的最頂端執行

微任務的執行:微任務將當前任務的內容挪至當前任務列的最底端執行

示例


``new Promise(function (res) {
    console.log(1);//---1
    res();
    Promise.resolve().then(function () {
      console.log(2);//---3
    });
    new Promise(function (res) {
      res();
    }).then(function () {
      console.log(-1);//---4
    });
    console.log(0);//-----2
  })
    .then(function () {
      console.log(3);//---5
      Promise.resolve().then(function () {
        console.log(4);//---7
      });
    })
    .then(function () {
      console.log(5);//---8
    });
  Promise.resolve().then(function () {
    console.log(6);//---6
    Promise.resolve().then(function () {
      console.log(7);//----9
    });
  });

  setTimeout(function () {
    setTimeout(function () {
      console.log(8);//---12
    }, 0);
    Promise.resolve().then(function () {
      console.log(9);//---10
    });
  }, 0);
  setTimeout(function () {
    console.log(10);//---11
  }, 0);

進行先後執行順序的判斷

  • promise中,then之後的是微任務,then之前的是同步任務,先執行同步任務
  • 同等級的Promise的轉移權重高於then(微任務內的微任務優於微任務執行)
  • 找到微任務對應的then
  • 找到對應的微任務等級,每個等級都是重新開始轉移,和上級無關,不關心下級
  • 巨集任務的微任務優於微任務的巨集任務
new Promise(function(resolve){
  resolve();
  Promise.resolve().then(function(){
      console.log("b");
  })

  Promise.resolve().then(function(){
      console.log("c");
  })

}).then(function(){
  console.log("a");
})           
結果:   b  c  a