深入理解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() 函数并将其放入堆栈中。它记录 Hello, World! 完成其执行，因此它被从堆栈中取出。接下来调用 helloTeam() 函数并将其放入堆栈中。在执行过程中，我们记录 Hello, Team! 并调用 helloPerson()。 helloTeam() 的执行还没有完成，所以它停留在堆栈上，而 helloPerson() 则放在它上面。

后进先出原则规定 helloPerson() 现在执行。这会将 Hello, Monty! 记录到控制台，从而完成其执行，并且 helloPerson() 将从堆栈中取出。之后 helloTeam() 函数就会出栈，我们最终到达 byeWorld()。它会记录再见，世界！，然后从堆栈中消失。

队列一直是空的。

现在，考虑上述代码的细微变化：

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!

*/

我们在这里所做的唯一更改是使用 setTimeout()。但是，超时已设置为零。因此，我们期望 Hello, Monty! 在 Bye, World! 之前输出。如果您了解事件循环的工作原理，您就会明白为什么不会发生这种情况。< /p>

当helloTeam()入栈时，遇到setTimeout()方法。但是，setTimeout() 中对 helloPerson() 的调用会被放入队列中，一旦没有同步任务需要执行，就会被执行。

一旦对 byeWorld() 的调用完成，事件循环将检查队列中是否有任何挂起的任务，并找到对 helloPerson() 的调用。此时，它执行该函数并将 Hello, Monty! 记录到控制台。

这表明您提供给 setTimeout() 的超时持续时间并不是回调执行的保证时间。这是执行回调的最短时间。

保持我们的网页响应

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() 函数中，我们迭代从 start 到 end 的数字。对于每个数字，我们调用 isPrime() 函数来查看它是否是素数。 isPrime() 函数本身有一个 for 循环，该循环从 2 到 Math.sqrt(num) 来确定数字是否为素数。

查找给定范围内的所有素数可能需要一段时间，具体取决于您使用的值。当浏览器进行此计算时，它无法执行任何其他操作。这是因为 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 不断执行函数直至完成，因此进行大量计算有时会“挂起”浏览器窗口。根据我们对事件循环的理解，我们可以重写我们的函数，以便它们批量进行计算。这允许浏览器保持窗口对用户的响应。它还使我们能够定期向用户更新我们在计算中取得的进展。