您可能已經(jīng)知道 JavaScript 是單執(zhí)行緒程式語(yǔ)言。這意味著 JavaScript 在 Web 瀏覽器或 Node.js 中的單一主執(zhí)行緒上運(yùn)行。在單一主執(zhí)行緒上運(yùn)行意味著一次只運(yùn)行一段 JavaScript 程式碼。

JavaScript 中的事件循環(huán)在決定程式碼如何在主執(zhí)行緒上執(zhí)行方面發(fā)揮著重要作用。事件循環(huán)負(fù)責(zé)一些事情，例如程式碼的執(zhí)行以及事件的收集和處理。它也處理任何排隊(duì)子任務(wù)的執(zhí)行。

在本教程中，您將學(xué)習(xí) JavaScript 中事件循環(huán)的基礎(chǔ)知識(shí)。

事件循環(huán)如何運(yùn)作

為了理解事件循環(huán)的工作原理，您需要了解三個(gè)重要術(shù)語(yǔ)。

堆疊

呼叫堆疊只是追蹤函數(shù)執(zhí)行上下文的函數(shù)呼叫堆疊。該堆疊遵循後進(jìn)先出 (LIFO) 原則，這意味著最近調(diào)用的函數(shù)將是第一個(gè)執(zhí)行的函數(shù)。

隊(duì)列

佇列包含一系列由 JavaScript 執(zhí)行的任務(wù)。該佇列中的任務(wù)可能會(huì)導(dǎo)致呼叫函數(shù)，然後將其放入堆疊中。僅當(dāng)堆疊為空時(shí)才開始佇列的處理。隊(duì)列中的項(xiàng)目遵循先進(jìn)先出 (FIFO) 原則。這意味著最舊的任務(wù)將首先完成。

堆

堆基本上是儲(chǔ)存和分配物件的一大塊記憶體區(qū)域。它的主要目的是儲(chǔ)存堆疊中的函數(shù)可能使用的資料。

基本上，JavaScript 是單執(zhí)行緒的，一次執(zhí)行一個(gè)函數(shù)。這個(gè)單一函數(shù)被放置在堆疊上。該函數(shù)還可以包含其他巢狀函數(shù)，這些函數(shù)將放置在堆疊中的上方。堆疊遵循 LIFO 原則，因此最近呼叫的巢狀函數(shù)將首先執(zhí)行。

API 請(qǐng)求或計(jì)時(shí)器等非同步任務(wù)將會(huì)新增至佇列以便稍後執(zhí)行。 JavaScript 引擎在空閒時(shí)開始執(zhí)行佇列中的任務(wù)。

考慮以下範(fàn)例：

function helloWorld() {
    console.log("Hello, World!");
}

function helloPerson(name) {
    console.log(`Hello, ${name}!`);
}

function helloTeam() {
    console.log("Hello, Team!");
    helloPerson("Monty");
}

function byeWorld() {
    console.log("Bye, World!");
}

helloWorld();
helloTeam();
byeWorld();

/* Outputs:

Hello, World!
Hello, Team!
Hello, Monty!
Bye, World!

*/

讓我們看看如果運(yùn)行上面的程式碼，堆疊和佇列會(huì)是什麼樣子。

呼叫 helloWorld() 函數(shù)並將其放入堆疊中。它記錄 Hello, World! 完成其執(zhí)行，因此它被從堆疊中取出。接下來呼叫 helloTeam() 函數(shù)並將其放入堆疊中。在執(zhí)行過程中，我們記錄 Hello, Team! 並呼叫 helloPerson()。 helloTeam() 的執(zhí)行還沒完成，所以它停留在堆疊上，而 helloPerson() 則放在它上面。

後進(jìn)先出原則規(guī)定 helloPerson() 現(xiàn)在執(zhí)行。這會(huì)將 Hello, Monty! 記錄到控制臺(tái)，從而完成其執(zhí)行，並且 helloPerson() 將從堆疊中取出。之後 helloTeam() 函數(shù)就會(huì)出棧，我們最後到達(dá) byeWorld()。它會(huì)記錄再見，世界！ ，然後從堆疊中消失。

隊(duì)列一直是空的。

現(xiàn)在，考慮上述程式碼的細(xì)微變化：

function helloWorld() {
    console.log("Hello, World!");
}

function helloPerson(name) {
    console.log(`Hello, ${name}!`);
}

function helloTeam() {
    console.log("Hello, Team!");
    setTimeout(() => {
        helloPerson("Monty");
    }, 0);
}

function byeWorld() {
    console.log("Bye, World!");
}

helloWorld();
helloTeam();
byeWorld();

/* Outputs:

Hello, World!
Hello, Team!
Bye, World!
Hello, Monty!

*/

我們?cè)谶@裡所做的唯一更改是使用 setTimeout()。但是，超時(shí)已設(shè)定為零。因此，我們期望 Hello, Monty! 在 Bye, World! 之前輸出。如果您了解事件循環(huán)的工作原理，您就會(huì)明白為什麼不會(huì)發(fā)生這種情況。 < /p>

當(dāng)helloTeam()入堆疊時(shí)，遇到setTimeout()方法。但是，setTimeout() 中對(duì) helloPerson() 的呼叫會(huì)被放入佇列中，一旦沒有同步任務(wù)需要執(zhí)行，就會(huì)被執(zhí)行。

一旦對(duì) byeWorld() 的呼叫完成，事件循環(huán)將檢查佇列中是否有任何掛起的任務(wù)，並找到對(duì) helloPerson() 的呼叫。此時(shí)，它執(zhí)行該函數(shù)並將 Hello, Monty! 記錄到控制臺(tái)。

這表示您提供給 setTimeout() 的超時(shí)持續(xù)時(shí)間並不是回呼執(zhí)行的保證時(shí)間。這是執(zhí)行回調(diào)的最短時(shí)間。

保持我們的網(wǎng)頁(yè)回應(yīng)

JavaScript 的一個(gè)有趣的功能是它會(huì)執(zhí)行一個(gè)函數(shù)直到完成。這意味著只要函數(shù)在堆疊上，事件循環(huán)就無(wú)法處理佇列中的任何其他任務(wù)或執(zhí)行其他函數(shù)。

這可能會(huì)導(dǎo)致網(wǎng)頁(yè)“掛起”，因?yàn)樗鼰o(wú)法執(zhí)行其他操作，例如處理使用者輸入或進(jìn)行與 DOM 相關(guān)的更改。考慮以下範(fàn)例，我們?cè)谄渲胁檎医o定範(fàn)圍內(nèi)的素?cái)?shù)數(shù)量：

function isPrime(num) {
  if (num <= 1) {
    return false;
  }

  for (let i = 2; i <= Math.sqrt(num); i++) {
    if (num % i === 0) {
      return false;
    }
  }
  
  return true;
}

function listPrimesInRange(start, end) {
  const primes = [];

  for (let num = start; num <= end; num++) {
    if (isPrime(num)) {
      primes.push(num);
    }
  }

  return primes;
}

在我們的 listPrimesInRange() 函數(shù)中，我們迭代從 start 到 end 的數(shù)字。對(duì)於每個(gè)數(shù)字，我們呼叫 isPrime() 函數(shù)來查看它是否是質(zhì)數(shù)。 isPrime() 函數(shù)本身有一個(gè)for 循環(huán)，從2 到Math.sqrt(num) 來決定數(shù)字是否為素?cái)?shù)。

查找給定范圍內(nèi)的所有素?cái)?shù)可能需要一段時(shí)間，具體取決于您使用的值。當(dāng)瀏覽器進(jìn)行此計(jì)算時(shí)，它無(wú)法執(zhí)行任何其他操作。這是因?yàn)?listPrimesInRange() 函數(shù)將保留在堆棧中，瀏覽器將無(wú)法執(zhí)行隊(duì)列中的任何其他任務(wù)。

現(xiàn)在，看一下以下函數(shù)：

function listPrimesInRangeResponsively(start) {
  let next = start + 100,000;

  if (next > end) {
    next = end;
  }

  for (let num = start; num <= next; num++) {
    if (isPrime(num)) {
      primeNumbers.push(num);
    }

    if (num == next) {
      percentage = ((num - begin) * 100) / (end - begin);
      percentage = Math.floor(percentage);

      progress.innerText = `Progress ${percentage}%`;

      if (num != end) {
        setTimeout(() => {
          listPrimesInRangeResponsively(next + 1);
        });
      }
    }

    if (num == end) {
      percentage = ((num - begin) * 100) / (end - begin);
      percentage = Math.floor(percentage);

      progress.innerText = `Progress ${percentage}%`;

      heading.innerText = `${primeNumbers.length - 1} Primes Found!`;

      console.log(primeNumbers);

      return primeNumbers;
    }
  }
}

這一次，我們的函數(shù)僅在批量處理范圍時(shí)嘗試查找素?cái)?shù)。它通過遍歷所有數(shù)字但一次僅處理其中的 100,000 個(gè)來實(shí)現(xiàn)這一點(diǎn)。之后，它使用 setTimeout() 觸發(fā)對(duì)同一函數(shù)的下一次調(diào)用。

下一個(gè)調(diào)用將被放入隊(duì)列中，暫時(shí)清空堆棧以處理任何其他任務(wù)。之后，JavaScript 引擎開始在下一批 100,000 個(gè)數(shù)字中查找素?cái)?shù)。

嘗試單擊此頁(yè)面上的計(jì)算（卡?。?/strong>按鈕，您可能會(huì)收到一條消息，指出該網(wǎng)頁(yè)正在減慢您的瀏覽器速度，并建議您停止該腳本。 p>