当前位置：首页 > news >正文

【H2O2 | 软件开发】事件循环机制

news 来源：原创 2025/8/21 5:16:34

前言

开篇语

准备工作

正文

概念

流程

事件队列类型

示例

结束语

前言

开篇语

本系列为短篇，每次讲述少量知识点，无需一次性灌输太多的新知识点。该主题文章主要是围绕前端、全栈开发相关面试常见问题撰写的，希望对诸位有所帮助。

准备工作

概念篇，不对开发环境作要求。

正文

概念

事件循环（Event Loop）是处理异步事件的一种机制，特别是在单线程环境中（如JavaScript在浏览器或Node.js中的运行）。它允许程序在等待异步操作（如I/O操作、定时器、网络请求等）完成时继续执行其他任务，从而避免阻塞主线程。

在JavaScript等语言中，代码通常运行在单线程中，这意味着同一时间只能执行一个任务。为了处理I/O操作、定时器等需要等待的任务（异步任务），程序会将它们交给系统或浏览器处理，而不是阻塞主线程。当异步操作完成后，相关的回调函数会被放入事件队列中，等待执行。事件循环会不断地检查事件队列，如果有任务就取出并执行，直到队列为空（轮询）。

简单来说，事件循环通过将并发任务转化为顺序任务，使用非阻塞的轮询方式，提高了程序的响应性和吞吐量。

流程

事件循环的四个步骤如下——

执行同步代码：事件循环首先会执行所有同步代码，直到调用栈为空。
检查事件队列：当调用栈清空后，事件处理器会检查事件队列中是否有待处理的任务。
执行任务：如果事件队列中有任务，事件处理器会将其取出并执行，直到调用栈再次为空。
重复：事件循环会不断重复上述过程，直到所有任务完成。

事件队列类型

在浏览器环境中，事件队列通常分为以下两种：

宏任务队列（MacroTask Queue）：包括setTimeout、setInterval、异步Ajax操作、I/O操作、用户交互、UI渲染等。
微任务队列（MicroTask Queue）：包括Promise的回调、MutationObserver等。

setTimeout和setInterval都是ES6计时器中的内容。

常见的Promise的回调函数有then，catch和finally。

MutationObserver是一个用于监视 DOM（文档对象模型）变化的接口，可以监听对 DOM 树的修改（如节点添加、删除、属性更改、文本内容变化等），并在这些变化发生时执行回调函数。

事件循环会优先处理微任务队列中的任务，然后再处理宏任务队列中的任务。

示例

比如，对于下面的代码，它将输出什么结果？

console.log("1");setTimeout(() => {console.log("2");
}, 0);Promise.resolve().then(() => {console.log("3");
});console.log("4");

答案是1432，即先处理同步，再处理异步，而在异步中先处理微任务队列中的任务，再处理宏任务队列中的任务。

特别的，对于用户交互事件，如点击事件来说，则执行顺序还取决于事件发生的顺序。比如如果在计时器时间节点到来前点击，则会先输出用户点击事件的输出结果，反之同理。

结束语

本期内容到此结束。关于本系列的其他博客，可以查看我的面试题专栏。

本系列的博客主要是记录学习经历，并总结阶段的知识点。全篇的操作过程由笔者完成并核验，在部分定义上有参考其他的内容。希望这对您有所帮助，并真心地祝您早日找到心仪的工作岗位。

==期待与你在下一期博客中再次相遇==

——分解的【H2O2】

前言

开篇语

准备工作

正文

概念

流程

事件队列类型

示例

结束语

相关文章：