理解JavaScript的事件循环机制：深入探索与代码示例_详解js中的事件循环举例说明-优快云博客

本文链接：https://blog.youkuaiyun.com/Allen_kaihui/article/details/141501380

理解JavaScript的事件循环机制：深入探索与代码示例

在JavaScript的世界里，事件循环（Event Loop）是核心中的核心，它负责管理异步行为，确保代码能够有序且高效地执行。本文将深入探讨JavaScript的事件循环机制，并通过代码示例来加深理解。

1. 什么是事件循环？

事件循环是JavaScript运行时环境（如浏览器或Node.js）中的一种机制，用于监听和分发事件，以及执行代码。由于JavaScript是单线程的，这意味着它在同一时间内只能执行一个任务。为了处理多个任务（尤其是异步任务），事件循环机制被引入。

2. JavaScript的执行栈和任务队列

2.1 执行栈（Call Stack）

执行栈是JavaScript代码执行的地方。当函数被调用时，它会被推入执行栈中。函数执行完成后，它会从执行栈中弹出，控制权交还给执行栈中的下一个函数。如果执行栈中的代码尝试执行过多的计算或同步调用，可能会导致调用栈溢出错误。

2.2 任务队列（Task Queues）

JavaScript引擎会将异步任务的结果放入任务队列中。这些队列遵循先进先出（FIFO）的原则。任务队列分为两种类型：宏任务队列（Macro-task Queue）和微任务队列（Micro-task Queue）。

宏任务：包括整体代码、setTimeout、setInterval、setImmediate（Node.js特有）、I/O、UI渲染等。
微任务：包括Promise.then、MutationObserver、process.nextTick（Node.js特有）等。

3. 事件循环的工作流程

检查执行栈：事件循环首先检查执行栈是否为空。如果执行栈为空，则继续；如果执行栈不为空，则等待执行栈清空。
执行宏任务：从宏任务队列中取出一个任务并执行。执行完毕后，控制权交还给事件循环。
执行微任务：在执行完一个宏任务后，事件循环会查看是否存在微任务需要执行。如果存在，它会清空所有微任务队列中的任务。
渲染（在浏览器中）：在宏任务和微任务都执行完毕后，浏览器会进行DOM更新和页面重绘。
重复上述过程：事件循环会持续这个过程，直到所有任务都处理完毕或调用栈不再为空。

4. 代码示例

console.log('1. 同步代码开始');

setTimeout(() => {
    console.log('2. setTimeout: 宏任务');
    Promise.resolve().then(() => {
        console.log('4. setTimeout中的Promise.then: 微任务');
    });
}, 0);

Promise.resolve().then(() => {
    console.log('3. Promise.then: 微任务');
});

console.log('5. 同步代码结束');

// 假设这是浏览器环境，输出结果将会是：
// 1. 同步代码开始
// 5. 同步代码结束
// 3. Promise.then: 微任务
// 2. setTimeout: 宏任务
// 4. setTimeout中的Promise.then: 微任务

// 解释：
// - 首先，所有同步代码按顺序执行，包括打印'1. 同步代码开始'和'5. 同步代码结束'。
// - 当遇到setTimeout时，它会被推入到宏任务队列中。
// - 当遇到Promise.resolve().then()时，回调函数被推入到微任务队列中。
// - 同步代码执行完毕后，事件循环开始检查并执行微任务队列中的任务，即打印'3. Promise.then: 微任务'。
// - 微任务队列清空后，事件循环检查并执行宏任务队列中的setTimeout回调，打印'2. setTimeout: 宏任务'。
// - 在setTimeout的回调函数执行过程中，又遇到了一个Promise.resolve().then()，其回调函数被推入到微任务队列中。
// - setTimeout的宏任务执行完毕后，事件循环再次检查并执行微任务队列中的任务，即打印'4. setTimeout中的Promise.then: 微任务'。