解读JavaScript中的事件循环

您可能已经知道 JavaScript 是一种单线程编程语言。这意味着 JavaScript 在 Web 浏览器或 Node.js 中的单个主线程上运行。在单个主线程上运行意味着一次仅运行一段 JavaScript 代码。

JavaScript 中的事件循环在确定代码如何在主线程上执行方面发挥着重要作用。事件循环负责一些事情，例如代码的执行以及事件的收集和处理。它还处理任何排队子任务的执行。

在本教程中，您将学习 JavaScript 中事件循环的基础知识。

事件循环如何工作

为了理解事件循环的工作原理，您需要了解三个重要术语。

堆栈

调用堆栈只是跟踪函数执行上下文的函数调用堆栈。该堆栈遵循后进先出 (LIFO) 原则，这意味着最近调用的函数将是第一个执行的函数。

队列

队列包含一系列由 JavaScript 执行的任务。该队列中的任务可能会导致调用函数，然后将其放入堆栈中。仅当堆栈为空时才开始队列的处理。队列中的项目遵循先进先出 (FIFO) 原则。这意味着最旧的任务将首先完成。

堆

堆基本上是存储和分配对象的一大块内存区域。它的主要目的是存储堆栈中的函数可能使用的数据。

基本上，JavaScript 是单线程的，一次执行一个函数。这个单一函数被放置在堆栈上。该函数还可以包含其他嵌套函数，这些函数将放置在堆栈中的上方。堆栈遵循 LIFO 原则，因此最近调用的嵌套函数将首先执行。

API 请求或计时器等异步任务将添加到队列以便稍后执行。 JavaScript 引擎在空闲时开始执行队列中的任务。

考虑以下示例：

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!

*/

让我们看看如果运行上面的代码，堆栈和队列会是什么样子。

调用 helloWorld() 函数并将其放入堆栈中。它记录 helloWorld() 函数并将其放入堆栈中。它记录 Hello, World! 完成其执行，因此它被从堆栈中取出。接下来调用 helloTeam() 函数并将其放入堆栈中。在执行过程中，我们记录 Hello, Team! 并调用 helloPerson()。 helloTeam() 的执行还没有完成，所以它停留在堆栈上，而 helloPerson()Hello, World!

完成其执行，因此它被从堆栈中取出。接下来调用 helloTeam() 函数并将其放入堆栈中。在执行过程中，我们记录

Hello, Team!helloPerson() 现在执行。这会将 Hello, Monty! 记录到控制台，从而完成其执行，并且 helloPerson() 将从堆栈中取出。之后 helloTeam() 函数就会出栈，我们最终到达 byeWorld() 并调用 helloPerson()。 helloTeam() 的执行还没有完成，所以它停留在堆栈上，而 helloPerson() 则放在它上面。 后进先出原则规定 helloPerson() 现在执行。这会将

Hello, Monty!

记录到控制台，从而完成其执行，并且 helloPerson() 将从堆栈中取出。之后 helloTeam() 函数就会出栈，我们最终到达 byeWorld()。它会记录

再见，世界！

，然后从堆栈中消失。

队列一直是空的。setTimeout() 现在，考虑上述代码的细微变化：

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!

*/

我们在这里所做的唯一更改是使用 。但是，超时已设置为零。因此，我们期望 Hello, Monty!

在 helloTeam()入栈时，遇到setTimeout()方法。但是，setTimeout() 中对 helloPerson()Bye, World!

之前输出。如果您了解事件循环的工作原理，您就会明白为什么不会发生这种情况。

byeWorld() 的调用完成，事件循环将检查队列中是否有任何挂起的任务，并找到对 helloPerson()当helloTeam()入栈时，遇到方法。但是， 中对 helloPerson() 的调用会被放入队列中，一旦没有同步任务需要执行，就会被执行。

一旦对 setTimeout() 的调用。此时，它执行该函数并将

Hello, Monty!

记录到控制台。

这表明您提供给

的超时持续时间并不是回调执行的保证时间。这是执行回调的最短时间。

保持我们的网页响应

listPrimesInRange() 函数中，我们迭代从 start 到 end 的数字。对于每个数字，我们调用 isPrime() 函数来查看它是否是素数。 isPrime() 函数本身有一个 for 循环，该循环从 2 到 Math.sqrt(num)JavaScript 的一个有趣的特性是它会运行一个函数直到完成。这意味着只要函数在堆栈上，事件循环就无法处理队列中的任何其他任务或执行其他函数。

🎜这可能会导致网页“挂起”，因为它无法执行其他操作，例如处理用户输入或进行与 DOM 相关的更改。考虑以下示例，我们在其中查找给定范围内的素数数量：🎜

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() 函数将保留在堆栈中，浏览器将无法执行队列中的任何其他任务。

现在，看一下以下函数：

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;
    }
  }
}

这一次，我们的函数仅在批量处理范围时尝试查找素数。它通过遍历所有数字但一次仅处理其中的 100,000 个来实现这一点。之后，它使用 setTimeout() 触发对同一函数的下一次调用。

当 setTimeout() 被调用而没有指定延迟时，它会立即将回调函数添加到事件队列中。

下一个调用将被放入队列中，暂时清空堆栈以处理任何其他任务。之后，JavaScript 引擎开始在下一批 100,000 个数字中查找素数。

尝试单击此页面上的计算（卡住）按钮，您可能会收到一条消息，指出该网页正在减慢您的浏览器速度，并建议您停止该脚本。 p>

另一方面，单击计算（响应式）按钮仍将使网页保持响应式。

最终想法

在本教程中，我们了解了 JavaScript 中的事件循环以及它如何有效地执行同步和异步代码。事件循环使用队列来跟踪它必须执行的任务。

由于 JavaScript 不断执行函数直至完成，因此进行大量计算有时会“挂起”浏览器窗口。根据我们对事件循环的理解，我们可以重写我们的函数，以便它们批量进行计算。这允许浏览器保持窗口对用户的响应。它还使我们能够定期向用户更新我们在计算中取得的进展。

以上是解读JavaScript中的事件循环的详细内容。更多信息请关注PHP中文网其他相关文章！