【H2O2 | 软件开发】事件循环机制
目录
前言
开篇语
准备工作
正文
概念
流程
事件队列类型
示例
结束语
前言
开篇语
本系列为短篇，每次讲述少量知识点，无需一次性灌输太多的新知识点。该主题文章主要是围绕前端、全栈开发相关面试常见问题撰写的，希望对诸位有所帮助。
准备工作
概念篇，不对开发环境作要求。
正文
概念
事件循环（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】