JS中事件循環(huán)機制的示例分析

小編給大家分享一下JS中事件循環(huán)機制的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

1、JavaScript是單線程的

JavaScript 是一種單線程的編程語言，只有一個調(diào)用棧，決定了它在同一時間只能做一件事。在代碼執(zhí)行的時候，通過將不同函數(shù)的執(zhí)行上下文壓入執(zhí)行棧中來保證代碼的有序執(zhí)行。在執(zhí)行同步代碼的時候，如果遇到了異步事件，js 引擎并不會一直等待其返回結(jié)果，而是會將這個事件掛起，繼續(xù)執(zhí)行執(zhí)行棧中的其他任務(wù)。因此JS又是一個非阻塞、異步、并發(fā)式的編程語言。

2、同步和異步

同步和異步的關(guān)系就類似于我們在餐廳排隊吃飯的時候，每個人必須挨個的排隊來進行買飯這個操作，而在這個過程中十分無聊，這時候我們可以邊排著隊邊玩下手機，不需多久就排到了我們買飯。這個排隊過程就是JS中的一個同步操作，玩手機就像一個異步操作。同步和異步的差別就在于排隊買飯和玩手機這兩個任務(wù)的執(zhí)行順序的不同。

同步： 指的是在主線程上排隊執(zhí)行的任務(wù)，只有前一個任務(wù)執(zhí)行完畢，才能執(zhí)行后一個任務(wù)?？梢岳斫鉃樵趫?zhí)行完一個函數(shù)或方法之后，一直等待系統(tǒng)返回值或消息，這時程序是處于阻塞的，只有接收到返回的值或消息后才往下執(zhí)行其他的命令。

異步： 指的是不進入主線程，某個異步任務(wù)可以執(zhí)行了，該任務(wù)才會進入主線程執(zhí)行。執(zhí)行完函數(shù)或方法后，不必阻塞性地等待返回值或消息，只需要向系統(tǒng)委托一個異步過程，那么當系統(tǒng)接收到返回值或消息時，系統(tǒng)會自動觸發(fā)委托的異步過程，從而完成一個完整的流程。

console.log(1);
setTimeout(() => {
  console.log(2);
}, 0);
setTimeout(() => {
  console.log(3);
}, 0);
setTimeout(() => {
  console.log(4);
}, 0);
console.log(5);

上面的代碼會打印  1 》 5 》 2 》 3 》4，為什么會產(chǎn)生這樣的結(jié)果，我們來看下事件循環(huán)。

3、事件循環(huán)

事件循環(huán)過程可以簡單描述為：

a、函數(shù)入棧，當 Stack 中執(zhí)行到異步任務(wù)的時候，就將他丟給 WebAPIs ,接著執(zhí)行同步任務(wù),直到 Stack 為空;

b、在此期間 WebAPIs 完成這個事件，把回調(diào)函數(shù)放入 CallbackQueue (任務(wù)隊列)中等待;

c、當執(zhí)行棧為空時，Event Loop 把 Callback Queue中的一個任務(wù)放入Stack中,回到第1步。

事件循環(huán)（Event Loop） 是讓 JavaScript 做到既是單線程，又絕對不會阻塞的核心機制，也是 JavaScript 并發(fā)模型（Concurrency Model）的基礎(chǔ)，是用來協(xié)調(diào)各種事件、用戶交互、腳本執(zhí)行、UI 渲染、網(wǎng)絡(luò)請求等的一種機制。在執(zhí)行和協(xié)調(diào)各種任務(wù)時，Event Loop 會維護自己的事件隊列。

事件隊列是一個存儲著待執(zhí)行任務(wù)的隊列，其中的任務(wù)嚴格按照時間先后順序執(zhí)行，排在隊頭的任務(wù)將會率先執(zhí)行，而排在隊尾的任務(wù)會最后執(zhí)行。事件隊列每次僅執(zhí)行一個任務(wù)，在該任務(wù)執(zhí)行完畢之后，再執(zhí)行下一個任務(wù),一個任務(wù)開始后直至結(jié)束，不會被其他任務(wù)中斷。執(zhí)行棧則是一個類似于函數(shù)調(diào)用棧的運行容器，當執(zhí)行棧為空時，JS 引擎便檢查事件隊列，如果不為空的話，事件隊列便將第一個任務(wù)壓入執(zhí)行棧中運行。

任務(wù)隊列：在JavaScript中，異步任務(wù)被分為兩種，一種宏任務(wù)（MacroTask）也叫Task，一種叫微任務(wù)：

宏任務(wù)的例子很多，包括創(chuàng)建主文檔對象、解析HTML、執(zhí)行主線（或全局）JavaScript代碼，更改當前URL以及各種事件，如頁面加載、輸入、網(wǎng)絡(luò)事件和定時器事件。從瀏覽器的角度來看，宏任務(wù)代表一個個離散的、獨立工作單元。運行完任務(wù)后，瀏覽器可以繼續(xù)其他調(diào)度，如重新渲染頁面的UI或執(zhí)行垃圾回收。

而微任務(wù)是更小的任務(wù)。微任務(wù)更新應用程序的狀態(tài)，但必須在瀏覽器任務(wù)繼續(xù)執(zhí)行其他任務(wù)之前執(zhí)行，瀏覽器任務(wù)包括重新渲染頁面的UI。微任務(wù)的案例包括promise回調(diào)函數(shù)、DOM發(fā)生變化等。微任務(wù)需要盡可能快地、通過異步方式執(zhí)行，同時不能產(chǎn)生全新的微任務(wù)。微任務(wù)使得我們能夠在重新渲染UI之前執(zhí)行指定的行為，避免不必要的UI重繪，UI重繪會使應用程序的狀態(tài)不連續(xù)。

當當前執(zhí)行棧中的事件執(zhí)行完畢后，js 引擎首先會判斷微任務(wù)對列中是否有任務(wù)可以執(zhí)行，如果有就將微任務(wù)隊首的事件壓入棧中執(zhí)行。當微任務(wù)對列中的任務(wù)都執(zhí)行完成后再去判斷宏任務(wù)對列中的任務(wù)。每次宏任務(wù)執(zhí)行完畢，都會去判斷微任務(wù)隊列是否產(chǎn)生新任務(wù)，若存在就優(yōu)先執(zhí)行微任務(wù)，否則按序執(zhí)行宏任務(wù)。

事件循環(huán)通常至少需要兩個任務(wù)隊列：宏任務(wù)隊列和微任務(wù)隊列。兩種隊列在同一時刻都只執(zhí)行一個任務(wù)。

console.log("script start");

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

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

console.log("script end");

按照上面的內(nèi)容，分析執(zhí)行步驟：

1、宏任務(wù)：執(zhí)行整體代碼（相當于<script>中的代碼）：

• 輸出: script start

• 遇到 setTimeout，加入宏任務(wù)隊列，當前宏任務(wù)隊列(setTimeout)

• 遇到 promise，加入微任務(wù)，當前微任務(wù)隊列(promise1)

• 輸出：script end

2、微任務(wù)：執(zhí)行微任務(wù)隊列（promise1）

• 輸出：promise1，then 之后產(chǎn)生一個微任務(wù)，加入微任務(wù)隊列，當前微任務(wù)隊列（promise2）

• 執(zhí)行 then，輸出promise2

• 執(zhí)行渲染操作，更新界面。

• 宏任務(wù)：執(zhí)行 setTimeout

• 輸出：setTimeout

注意：new Promise(..)中的代碼，也是同步代碼，會立即執(zhí)行。只有then之后的代碼，才是異步執(zhí)行的代碼，是一個微任務(wù)。

console.log("script start");

setTimeout(function () {
  console.log("timeout1");
}, 10);

new Promise((resolve) => {
  console.log("promise1");
  resolve();
  setTimeout(() => console.log("timeout2"), 10);
}).then(function () {
  console.log("then1");
});

console.log("script end");

步驟解析：

當前任務(wù)隊列：微任務(wù): [], 宏任務(wù)：[<script>]

宏任務(wù)：

• 輸出: script start

• 遇到 timeout1，加入宏任務(wù)

• 遇到 Promise，輸出promise1，直接 resolve，將 then 加入微任務(wù)，遇到 timeout2，加入宏任務(wù)。

• 輸出script end

• 宏任務(wù)第一個執(zhí)行結(jié)束

• 當前任務(wù)隊列：微任務(wù)[then1]，宏任務(wù)[timeou1, timeout2]

微任務(wù)：

• 執(zhí)行 then1，輸出then1

• 微任務(wù)隊列清空

• 當前任務(wù)隊列：微任務(wù)[]，宏任務(wù)[timeou1, timeout2]

宏任務(wù)：

• 輸出timeout1

• 輸出timeout2

• 當前任務(wù)隊列：微任務(wù)[]，宏任務(wù)[timeou2]

微任務(wù)：

• 為空跳過

• 當前任務(wù)隊列：微任務(wù)[]，宏任務(wù)[timeou2]

宏任務(wù)：

輸出timeout2

注意：async 和 await 其實就是 Generator 和 Promise 的語法糖。async 函數(shù)和普通 函數(shù)沒有什么不同，他只是表示這個函數(shù)里有異步操作的方法，并返回一個 Promise 對象

async function async1() {
  console.log("async1 start");
  await async2();
  console.log("async1 end");
}
// Promise 寫法
async function async1() {
  console.log("async1 start");
  Promise.resolve(async2()).then(() => console.log("async1 end"));
}

下面例子：

async function async1() {
  console.log("async1 start");
  await async2();
  console.log("async1 end");
}
async function async2() {
  console.log("async2");
}
async1();
setTimeout(() => {
  console.log("timeout");
}, 0);
new Promise(function (resolve) {
  console.log("promise1");
  resolve();
}).then(function () {
  console.log("promise2");
});
console.log("script end");

步驟解析：

當前任務(wù)隊列：宏任務(wù)：[<script>]，微任務(wù): []

宏任務(wù)：

• 輸出：async1 start

• 遇到 async2，輸出：async2，并將 then（async1 end）加入微任務(wù)

• 遇到 setTimeout，加入宏任務(wù)。

• 遇到 Promise，輸出：promise1，直接 resolve，將 then(promise2)加入微任務(wù)

• 輸出：script end

• 當前任務(wù)隊列：微任務(wù)[promise2, async1 end]，宏任務(wù)[timeout]

微任務(wù)：

• 輸出：promise2

• promise2 出隊

• 輸出：async1 end

• async1 end 出隊

• 微任務(wù)隊列清空

• 當前任務(wù)隊列：微任務(wù)[]，宏任務(wù)[timeout]

宏任務(wù)：

• 輸出：timeout

• timeout 出隊，宏任務(wù)清空

以上是“JS中事件循環(huán)機制的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！