高階前端進階（五）

一曲風流唯少年發表於2022-05-09
前端
詳解JavaScript中的事件迴圈機制！！！

一、簡單講解

這個大家應該或多或少都知道的

for (var i = 0; i < 10; i++) {
  setTimeout(() => {
    console.log(i); // 輸出10個10
  });
}

解析：先執行for迴圈，迴圈疊加i，然後再執行setTimeout 10遍，所以會輸出10個10
變體：

for (let i = 0; i < 10; i++) {
  setTimeout(() => {
    console.log(i); // 依次輸出0-9
  });
}

我們知道var跟let本質區別就是作用域的問題，所以會聯想到let導致的，但在這一點上，並不是作用域問題，因為從事件迴圈機制來解釋是有問題的
以上的程式碼等價於

for (var i = 0; i < 10; i++) {
  (function (i) {
    setTimeout(() => {
      console.log(i);
    });
  })(i); // 立即執行函式，以上的let應該是將程式碼特殊處理了下
}

立即執行函式：函式宣告後立即執行。
從事件迴圈的角度來說，應該先執行for迴圈將i疊加到10，執行完後再去執行for迴圈體（setTimeout）,此時的i變成了10，所以每次輸出都是10，
這裡使用let，應該是特殊處理了一下的。

二、深入講解

我們知道JavaScript語言是單執行緒的，至於為啥是單執行緒？
假設有兩個執行緒，一個在頁面上新增一個div，另一個執行緒在頁面上刪除div，那最終聽誰的？
那JavaScript怎麼實現非同步的呢？
在JavaScript中，有兩類任務：同步任務和非同步任務。
同步任務：普通的任務，依次從上往下執行。
非同步任務：又分為巨集任務、微任務。

巨集任務：setTimeout跟setInterval
微任務：Promise().then() 這裡要注意一下，Promise方法裡面的是同步任務，then裡面的才是微任務
執行順序：先執行同步任務，遇到非同步任務，將其放入到巨集任務或者微任務佇列中，然後優先執行微任務，接下來再去執行巨集任務。

簡單的例子：

setTimeout(function() {
    console.log(1)
}, 0);

new Promise(function(resolve, reject) {
    console.log(2); // 這裡是同步任務
    resolve();
}).then((res) => {
    console.log(3);
})
console.log(4);
// 輸出結果是 2  4  3  1

解析：從上往下執行，setTimeout是巨集任務，放到巨集任務佇列中，
Promise裡面的是同步任務，所以先執行，輸出2，then裡面的是微任務，放到微任務佇列中，
最後一個是同步任務，執行，輸出4，
然後執行微任務，輸出3
最後執行巨集任務，輸出1

來點難度的：

console.log(1);

setTimeout(function () {
  console.log(2);
}, 0);

setTimeout(function () {
  console.log(3);

  setTimeout(function () {
    console.log(4);
  }, 0);
}, 0);

new Promise(function (resolve, reject) {
  console.log(5);
  resolve();
}).then((res) => {
  console.log(6);
  new Promise(function (resolve, reject) {
    console.log(7);
    resolve();
  }).then((res) => {
    console.log(8);
  });
});

new Promise(function (resolve, reject) {
  console.log(9);
  resolve();
})
  .then((res) => {
    console.log(10);
  })
  .then((res) => {
    console.log(11);
  });

console.log(12);
// 輸出 1  5   9   12
//      6  7  10   8   11
//      2  3  4

解析：原理跟上面一樣，不過需要注意的是，8跟11的順序：，在這裡then的層級，將各個Promise裡面第一層的then放在一起，第二層的then放在一起，依此類推，
然後依次執行第一層的，執行完第一層，接下來執行完第二層，依此類推。
第一層（6，7，10）
第二層（8，11）
所以先輸出8， 再輸出11的。

再來一個（也最可能出錯或者無法理解的）：

console.log(1);
async function fn() {
  console.log(2);
  await console.log(3);
  console.log(4); // 這一步，你應該會有問題
}
setTimeout(() => {
  console.log(5);
}, 0);
fn();
new Promise((resolve) => {
  console.log(6);
  resolve();
}).then(() => {
  console.log(7);
});
console.log(8);
// 輸出：1  2  3   6   8   4  7  5

解析：async await是Promise的語法糖，只是針對寫法上的優化
將async await翻譯成Promise：

async function fn() {
  console.log(2);
  await console.log(3);
  console.log(4); // 這一步，你應該會有問題
}
// 等價於
function fn() {
  return new Promise((resolve, reject) => {
    console.log(2);
    resolve(
      (() => {
        console.log(3);
      })() // 立即執行函式
    );
  }).then(() => {
    console.log(4);
  });
}

這樣，你應該能夠明白，為啥輸出3之後不是立即輸出4了吧！

再來一道加深鞏固的：

console.log(1);
async function fn() {
  console.log(2);
  await console.log(3);
  await console.log(4);
  console.log(5);
}
setTimeout(() => {
  console.log(6);
}, 2000);
setTimeout(() => {
  console.log(7);
}, 1000);
fn();
new Promise((resolve) => {
  console.log(8);
  new Promise((resolve) => {
    console.log(9);
    resolve();
  }).then(() => {
    console.log(10);
  });
  resolve();
}).then(() => {
  console.log(11);
  new Promise((resolve) => {
    console.log(12);
    resolve();
  }).then(() => {
    console.log(13);
  });
});
console.log(14);
// 輸出 1  2  3  8  9  14
//      4  10 11 12 5  13
//      7  6

我相信，你現在應該理解掌握了！

只要鑽的深，鐵杵都能給你磨成針！！！

相關文章