首页 > 文章 > 前端

JavaScript 事件循环：深入探讨

来源：dev.to

时间：2024-07-15 12:48:57 328浏览收藏

珍惜时间，勤奋学习！今天给大家带来《JavaScript 事件循环：深入探讨》，正文内容主要涉及到等等，如果你正在学习文章，或者是对文章有疑问，欢迎大家关注我！后面我会持续更新相关内容的，希望都能帮到正在学习的大家！

javascript 是一种单线程语言，一次执行一个任务。然而，由于事件循环，它可以轻松处理异步操作。事件循环是一个基本概念，它为 javascript 的并发模型提供了动力，使其能够在不阻塞主线程的情况下有效地管理多个操作。在本文中，我们将探讨 javascript 事件循环的复杂性，了解它的工作原理以及为什么它对于开发响应式 web 应用程序至关重要。

什么是 javascript 事件循环？

事件循环是javascript用来处理异步操作的机制。它不断检查调用堆栈和任务队列，确保任务按正确的顺序执行。事件循环的主要目标是通过管理同步和异步代码的执行来保持应用程序的响应能力。

事件循环的关键组件

1.调用堆栈：

调用堆栈是一种按后进先出 (lifo) 顺序跟踪函数调用的数据结构。当一个函数被调用时，它被添加到堆栈中。当函数执行完成后，它就会从堆栈中删除。

2.网络 api：

web api 由浏览器（或 node.js 环境）提供，用于处理异步操作，例如 settimeout、http 请求（xmlhttprequest、fetch api）和 dom 事件。这些 api 在 javascript 引擎之外运行。

3.回调队列（任务队列）：

回调队列是保存异步操作回调的数据结构。这些回调在调用堆栈为空时执行。

4.事件循环：

事件循环持续监控调用堆栈和回调队列。如果调用堆栈为空，它将从队列中取出第一个回调并将其推入堆栈，允许其执行。

事件循环如何工作

为了理解事件循环，让我们看一个例子：

console.log('start');

settimeout(() => {
  console.log('timeout');
}, 0);

console.log('end');

逐步执行：

1.初始化：

console.log('start') 函数被压入调用堆栈并执行，将 start 打印到控制台。然后该函数将从堆栈中删除。

2.异步操作：

settimeout 函数的调用带有回调，延迟为 0 毫秒。 settimeout 函数被压入调用堆栈，然后在设置计时器后立即删除。回调被传递到 web api。

3.续：

console.log('end') 函数被压入调用堆栈并执行，将 end 打印到控制台。然后该函数将从堆栈中删除。

4.回调执行：

调用堆栈为空后，事件循环检查回调队列。来自 settimeout 的回调被移动到回调队列，然后推送到调用堆栈，将 timeout 打印到控制台。

微任务和宏任务

在 javascript 中，任务分为两种类型：微任务和宏任务。理解它们之间的区别对于编写高效的异步代码至关重要。

1.微任务：

微任务包括 promise 和 mutationobserver 回调。它们具有更高的优先级，并且在宏任务之前执行。在每个宏任务之后，事件循环都会检查微任务队列并执行所有可用的微任务。

2.宏任务：

宏任务包括settimeout、setinterval和i/o操作。它们按照添加到回调队列的顺序执行。

promise 示例

考虑以下带有承诺的示例：

console.log('Start');

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

Promise.resolve().then(() => {
  console.log('Promise');
});

console.log('End');