Javascript中的事件循环机制详解

JavaScript 是一种单线程的编程语言，这意味着它一次只能执行一个任务。然而，JavaScript 的异步编程模型让它能够处理多个任务。事件循环（Event Loop）就是实现这种异步机制的核心机制。理解事件循环的工作原理对于掌握 JavaScript 的异步编程非常重要。

1. 基本概念

在 JavaScript 中，执行环境分为两种：主线程和任务队列。主线程负责执行 JavaScript 代码，任务队列则存放需要稍后执行的函数（通常是通过异步操作产生的，比如定时器、网络请求等）。

当 JavaScript 执行一段代码时，会按照以下顺序进行：

• 首先执行栈（Call Stack）中的代码。
• 遇到异步操作时（如 setTimeout、fetch 等），将相应的回调函数放入任务队列。
• 执行栈清空且没有其他同步代码后，事件循环开始工作。

2. 事件循环的主要步骤

事件循环的工作流程可以归纳为以下几个步骤：

1. 从执行栈中获取函数并执行。
2. 当遇到异步任务时，将其 callback 函数添加到相应的任务队列。
3. 执行栈清空后，事件循环会检查是否有待执行的异步任务。
4. 如果有，则将任务队列中的第一个任务取出，放入执行栈中执行。
5. 重复以上步骤，直到所有任务执行完毕。

3. 代码示例

下面是一个简单的代码示例，展示了事件循环的基本工作流：

console.log('开始');

setTimeout(() => {
    console.log('定时器 1 完成');
}, 0);

setTimeout(() => {
    console.log('定时器 2 完成');
}, 100);

Promise.resolve()
    .then(() => {
        console.log('Promise 1 完成');
    })
    .then(() => {
        console.log('Promise 2 完成');
    });

console.log('结束');

运行结果

开始
结束
Promise 1 完成
Promise 2 完成
定时器 1 完成
定时器 2 完成

解析

1. 开始和结束是直接在主线程中打印的，所以它们首先输出。
2. setTimeout 调用的回调函数会被放入宏任务队列中，0 的定时器会在执行栈空闲后被处理。
3. Promise.resolve().then() 的回调会被放入微任务队列。微任务的优先级高于宏任务，因此在处理完主线程任务后，首先会执行微任务队列中的所有任务。
4. 因此，输出的顺序中，Promise 的输出在 setTimeout 之前。

4. 微任务与宏任务

在事件循环中，我们会遇到微任务（Microtask）和宏任务（Macrotask）。微任务通常包括 Promise 和 Mutation Observers，宏任务则包括 setTimeout、setInterval、I/O 操作等。

微任务会在一次事件循环的最后阶段执行，而宏任务会在整个执行栈清空后执行。这导致即使多个 setTimeout 任务被创建，微任务的执行会先于它们得到执行。

5. 总结

JavaScript 的事件循环机制使得它可以高效地处理异步操作。理解事件循环有助于写出更高效、可维护的代码。在实践中，合理利用微任务和宏任务，可以优化应用的性能及响应速度。掌握事件循环的概念，可以帮助开发者在日常开发中避免一些常见的异步错误。