JavaScript 事件循环

什么是 JavaScript 事件循环？

在 JavaScript 中，事件循环是一种使用非阻塞 I/O 控制代码、事件或消息执行的机制。这提供了一种在 JavaScript 中进行非阻塞或异步操作的方法。

关键概念

1.单线程
JavaScript 是单线程的，这意味着它一次执行一个任务。单线程，因此，JavaScript 执行的一个线程就是所谓的“主线程”。

2.调用堆栈
它是 JavaScript 跟踪函数调用的数据结构。函数调用被压入堆栈。当它返回时，它被删除。当它为空时，JavaScript 就准备好处理下一步了。它通常也被称为“主线程”。

3.堆
这是 JavaScript 存储对象和变量的地方。它用于动态内存分配。

4.事件队列
等待执行的消息或任务队列。当任务被添加到队列中时，它会等待调用堆栈为空才能执行。

5.事件循环
它是不断监视调用堆栈和事件队列的东西。如果调用堆栈为空，则会将任务从事件队列移至调用堆栈并执行它们。

流程

• 代码的执行：当JavaScript开始执行代码时，它将函数调用推送到调用堆栈上。此外，它还执行一个又一个函数。
• 异步操作：立即操作是异步的，如 setTimeout 或网络请求，JavaScript 不会阻止执行。相反，它将该操作转发给 Web API，例如浏览器的计时器或处理 HTTP 请求的服务。

• 回调函数：当异步操作完成时，其回调函数被推入事件队列。

• 事件循环检查：事件循环现在按顺序检查调用堆栈以及事件队列。如果调用堆栈为空，它会从事件队列中选择第一个任务并将其推入调用堆栈来运行它。
  

console.log('Start');

setTimeout(() => {
  console.log('Timeout 1');
}, 1000);

setTimeout(() => {
  console.log('Timeout 2');
}, 500);

console.log('End');

请注意，以下步骤将逐步发生：

• 由于启动是同步操作，因此会立即记录。
• 第一个 setTimeout 以 1000ms 延迟注册，然后转到 Web API。它的回调将在 1000ms 后放入事件队列中。
• 第二个 setTimeout 以 500 毫秒延迟注册，然后转到 Web API。它的回调将在 500ms 后放入事件队列中。
• 结束会立即记录，因为它是同步的。
• 在 500 毫秒内，第二个 setTimeout 的回调从事件队列移至调用堆栈并记录 Timeout 2。
• setTimeout 的第一个速率在 1000ms 内从事件队列到调用堆栈并记录 Timeout 1。

总结

• 调用堆栈：按顺序执行函数。
• 事件队列：存储要执行的消息或任务。
• 事件循环：它执行任务，当事件队列为空时，这些任务将从事件队列传递到调用堆栈。

以上是JavaScript 事件循环的详细内容。更多信息请关注PHP中文网其他相关文章！