事件循环机制

eventLoop

事件循环（Event Loop）是用于管理和调度异步任务执行的一种机制，通常在浏览器中，也在其他 JavaScript 运行环境中存在。事件循环确保 JavaScript 单线程的执行模型下能够处理非阻塞的异步任务，以避免程序阻塞和提高性能。

js引擎遇到一个异步事件后并不会一直等待其返回结果，而是会将这个事件挂起（交给webapi处理），继续执行执行栈中的其他任务。当一个异步事件返回结果后（例如延时时间到了、ajax得到结果了等），js会将这个事件加入与当前执行栈不同的另一个队列，我们称之为任务（事件）队列。被放入任务队列不会立刻执行其回调，而是等待当前执行栈中的所有任务都执行完毕， 主线程处于闲置状态时，主线程会去查找事件队列是否有任务。如果有，那么主线程会从中取出排在第一位的事件，并把这个事件对应的回调放入执行栈中，然后执行其中的同步代码…，如此反复，这样就形成了一个无限的循环。这就是这个过程被称为“事件循环（Event Loop）”的原因。

事件循环的基本概念如下：

1. 调用栈（Call Stack）：JavaScript 中的代码执行是通过调用栈来管理的，它用于追踪函数调用的层次关系。当函数被调用时，它会被推入调用栈，当函数执行完毕后，将被从调用栈中弹出。

2. 消息队列（Message Queue）：消息队列用于存储异步任务的回调函数。当异步任务完成后，它们的回调函数会被推入消息队列。

3. 事件循环（Event Loop）：事件循环是一个循环，它不断地检查调用栈和消息队列。如果调用栈为空，事件循环会查看消息队列是否有待处理的任务。如果有，它会将任务的回调函数推入调用栈，然后执行该函数。

事件循环的流程可以简化为以下步骤：

• 检查调用栈是否为空。
• 如果调用栈为空，检查消息队列是否有待处理的任务。
• 如果有，将下一个任务的回调函数推入调用栈，并执行。
• 重复上述步骤。

这个机制确保了 JavaScript 在执行异步任务时不会阻塞主线程，从而保持了页面的响应性。常见的异步任务包括定时器回调、事件处理函数、网络请求等。

在浏览器中，事件循环也与 Web API（如DOM操作、Ajax请求）以及宿主环境（浏览器）紧密相关。当异步任务完成后，它们的回调函数会被添加到消息队列，然后由事件循环执行。

调用栈是什么？

调用栈（Call Stack）是 JavaScript 引擎用来追踪函数调用的一种数据结构。它以栈（Stack）的形式组织，遵循后进先出（Last-In-First-Out，LIFO）的原则。调用栈用于跟踪当前执行上下文（函数调用）的堆栈帧（Stack Frame）。

具体来说，调用栈有以下重要特性和作用：

1. 函数调用的追踪：每当函数被调用时，一个新的堆栈帧被推入调用栈的顶部。这个堆栈帧包含了函数的参数、局部变量以及函数内部的代码等信息。

2. 后进先出原则：调用栈遵循后进先出的原则，也就是最后进入的函数最先执行完毕并从栈顶弹出。这意味着函数调用的顺序是依次进栈和出栈的。

3. 递归调用：递归函数调用时，每个递归调用都会创建一个新的堆栈帧，并推入栈顶。这些堆栈帧会一直保留，直到递归结束，然后按照 LIFO 原则一个个出栈。

4. 错误追踪：当发生错误时，调用栈会提供有关错误发生位置的信息，这对于调试非常有帮助。错误消息通常包括堆栈跟踪，显示了错误发生的函数调用链。

以下是一个示例，展示了如何在 JavaScript 中使用调用栈：

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

function sayHello() {
  greet("Alice");
  greet("Bob");
}

sayHello();

在这个示例中，当 sayHello 被调用时，它会依次调用 greet("Alice") 和 greet("Bob")。这两个函数的堆栈帧将被依次推入调用栈，然后依照 LIFO 原则执行完毕并出栈。