您可能已经知道 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! 之前输出。如果您了解事件循环的工作原理，您就会明白为什么不会发生这种情况。
当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 不断执行函数直至完成，因此进行大量计算有时会“挂起”浏览器窗口。根据我们对事件循环的理解，我们可以重写我们的函数，以便它们批量进行计算。这允许浏览器保持窗口对用户的响应。它还使我们能够定期向用户更新我们在计算中取得的进展。
以上就是解读JavaScript中的事件循环的详细内容，更多请关注悠久资源其它相关文章！
