js 中事件循环的理解|极客笔记

js 中事件循环的理解

JavaScript 是一种基于事件驱动的编程语言，由于其单线程的特性，事件循环机制成为其运行的核心。了解事件循环的工作原理对于编写高效的 JavaScript 代码至关重要。本文将深入探讨 JavaScript 中事件循环的原理、执行顺序以及常见的问题和解决方案。

什么是事件循环？

在 JavaScript 中，事件循环是用来控制代码执行顺序的机制。JavaScript 引擎采用了单线程执行模型，即一次只能执行一个代码块，因此事件循环的作用就是管理代码的执行顺序，确保代码能够按照正确的顺序执行。

事件循环的基本原理是不断地将代码分成不同的执行单元，并将这些执行单元按照顺序放入执行队列中，然后逐个从执行队列中取出执行。这个过程就是事件循环的工作机制。

事件循环的执行顺序

在 JavaScript 中，事件循环主要由以下几个部分组成：

执行栈（Call Stack）：保存当前正在执行的代码块，遵循先进后出的原则。当执行栈为空时，表示当前没有代码在执行。
微任务队列（Microtask Queue）：存放微任务（microtask）的队列，微任务是在执行栈中的代码执行完毕后立即执行的任务。
宏任务队列（Macrotask Queue）：存放宏任务（macrotask）的队列，宏任务通常包括了整体代码块、setTimeout、setInterval 和 I/O 操作等。它们会在执行栈为空时按照一定的规则执行。

事件循环的执行顺序可以简单描述为：

首先执行全局执行上下文中的同步代码，将同步代码压入执行栈（Call Stack）中执行。
当同步代码执行完毕后，查看微任务队列（Microtask Queue）是否为空，如果不为空，则依次执行微任务队列中的任务，直到微任务队列为空。
微任务执行完毕后，查看宏任务队列（Macrotask Queue）中的队首任务，将其压入执行栈中执行。
重复上述步骤，直到微任务队列和宏任务队列中的任务都执行完毕。

事件循环的示例代码

以下是一个简单的示例代码，展示了事件循环的执行顺序：

console.log('Start');

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

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

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

console.log('End');

上述代码中，先执行同步代码打印Start和End，然后执行两个微任务Promise 1和Promise 2，最后执行宏任务setTimeout 1。

代码执行结果为：

Start
End
Promise 1
Promise 2
setTimeout 1

常见问题及解决方案

1. 微任务与宏任务的区别

微任务主要包括 Promise、MutationObserver 和 process.nextTick 等，被添加到微任务队列中，会在当前宏任务执行完毕后立即执行。而宏任务主要包括整体代码块、setTimeout、setInterval 和 I/O 操作等，被添加到宏任务队列中，只有在当前执行栈执行完毕后才会执行。