JS面试之对事件循环的理解

事件循环是 JavaScript 事件模型的核心，对于理解 JavaScript 的异步编程至关重要。事实上，事件循环是 JavaScript 成功的关键之一。

什么是事件循环？

JavaScript 是一种单线程编程语言。它有且只有一个主线程，因此只能同时执行一个任务。

事件循环是 JavaScript 异步编程的解决方案之一，它通过一种机制来实现 JavaScript 中的异步操作。

事件循环机制如下：

1. 所有同步任务在主线程中执行，形成一个执行栈。

当你的 JavaScript 代码执行时，所有的代码都在主线程上运行，并形成了执行栈。

2. 除了执行栈，还存在一个任务队列（task queue）。

JavaScript 引擎还维护了一个任务队列，用于存储不会立即执行的任务，也就是异步任务。

3. 当一个异步任务完成时，它会被添加到任务队列中。

当一个异步任务完成时，它会被添加到任务队列中，等待执行。

4. 等待同步任务执行完毕后，主线程会查看任务队列是否有任务需要执行。

当主线程执行完所有同步任务后，它会查看任务队列并执行相应的任务。如果队列中没有任务，则继续等待异步任务完成。

5. 重复以上步骤。

主线程不断地重复执行以上步骤，实现异步操作。

示例

1. setTimeout

console.log('start');

setTimeout(function() {
  console.log('setTimeout');
}, 0);

console.log('end');

在这个示例中，第一个同步任务是 console.log('start')，它会在执行栈中执行。然后，引擎遇到 setTimeout，它将被添加到任务队列中，因为它是一个异步任务。接下来，又有一个同步任务 console.log('end')，它也会立即执行。当执行栈中的所有同步任务执行完毕后，引擎就会再次查看任务队列并执行相应的任务。在这个例子中，它会执行 setTimeout 回调函数的代码，即输出 "setTimeout"。

因此，上述代码的输出如下：

start
end
setTimeout

2. Promise

console.log('start');

new Promise(function(resolve) {
  console.log('Promise');
  setTimeout(function() {
    resolve();
  }, 0);
}).then(function() {
  console.log('then');
});

console.log('end');

在这个示例中，我们创建了一个 Promise 对象，并将其传递给一个函数。当这个 Promise 被创建时，它的构造函数会立即执行，并在执行栈中执行，输出 "Promise"。接着，它遇到了一个异步任务 setTimeout，通过添加回调函数实现了异步操作，在异步任务中调用 resolve，表示 Promise 执行成功。由于 Promise 的一个特性是，它能够异步地通知 Promise 的状态变化，因此当 Promise 的状态变成 fulfilled（执行成功）后，它会将相关回调函数添加到微任务队列中。然后，我们执行同步任务 console.log('end')。

当执行栈中的所有同步任务执行完毕后，引擎查看任务队列并执行相应的任务。首先，它在微任务队列中找到了 Promise 的 then 回调函数，并将其添加到执行栈中。

因此，上述代码的输出如下：

start
Promise
end
then

总结

事件循环是 JavaScript 异步编程的核心机制，它通过一种任务队列机制实现了异步操作。了解事件循环机制，有助于我们更好地理解 JavaScript 异步编程。