解读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!

*/