插件窝 干货文章 了解 JavaScript 事件循环:初学者指南

了解 JavaScript 事件循环:初学者指南

队列 堆栈 任务 调用 452    来源:    2024-10-20

事件循环是 JavaScript 运行时环境的核心组件,对于执行异步任务至关重要。它持续监控两个主要结构:调用堆栈和事件队列。

调用堆栈

调用堆栈是一种后进先出(LIFO)数据结构,用于存储当前正在执行的函数。当一个函数被调用时,它被添加到堆栈的顶部。一旦函数完成,它就会从堆栈中删除。

网络 API

Web API 处理异步操作,例如 setTimeout、获取请求和 Promise。这些操作被卸载到 Web API 环境,允许主线程继续运行其他代码。

作业队列(微任务)

作业队列,也称为微任务队列,是先进先出(FIFO)结构。它包含准备执行的 async/await、promise 和 process.nextTick() 的回调。微任务具有更高的优先级,并在宏任务之前处理。

立即学习“Java免费学习笔记(深入)”;

任务队列(宏任务)

任务队列,或者说宏任务队列,也是一个 FIFO 结构。它包含准备执行的异步操作(例如 setInterval 和 setTimeout)的回调。宏任务在微任务之后处理。

事件循环如何工作

事件循环不断检查调用堆栈以查看它是否为空。如果调用堆栈为空,则事件循环首先查找作业队列。如果作业队列中有任何回调,它们就会出队并推送到调用堆栈上执行。一旦作业队列为空,事件循环就会检查任务队列并处理那里的任何回调。

可视化事件循环

这是一个简单的可视化,可以帮助您理解该过程:

  1. 调用堆栈:函数在此处压入和弹出。
  2. Web API:这里处理异步操作。
  3. 作业队列(微任务):高优先级回调在这里排队。
  4. 任务队列(宏任务):较低优先级的回调在这里排队。
  5. 事件循环:监控调用堆栈和队列,确保顺利执行。