JS事件循环从入门到放弃

2024-01-03 05:00:15

JS事件循环简介
JS事件循环（Event Loop）是JavaScript中的核心概念，它决定了JavaScript代码的执行顺序。事件循环是一个循环过程，它不断从事件队列中取出事件并执行。当事件队列为空时，事件循环会进入等待状态。当有新的事件添加到事件队列时，事件循环会重新启动。

事件队列和微任务队列

事件队列和微任务队列是事件循环中的两个重要概念。事件队列中存储着需要执行的事件，微任务队列中存储着需要执行的微任务。事件队列中的事件由事件触发，而微任务队列中的微任务由代码触发。微任务队列的优先级高于事件队列，因此微任务队列中的微任务会先于事件队列中的事件执行。

宏任务和微任务

宏任务和微任务是事件循环中的两种任务类型。宏任务是指需要较长时间才能执行的任务，例如网络请求、定时器、UI渲染等。微任务是指需要较短时间就能执行的任务，例如promise、setImmediate等。宏任务在事件队列中执行，微任务在微任务队列中执行。

事件循环过程

事件循环过程如下：

事件循环从事件队列中取出一个事件。
执行事件。
如果事件队列中还有事件，则重复步骤1和2。
如果事件队列为空，则事件循环进入等待状态。
当有新的事件添加到事件队列时，事件循环重新启动。

如何理解JS事件循环

理解JS事件循环的最好方法是通过一个例子。假设我们有一个如下代码：

console.log('start');
setTimeout(() => {
  console.log('setTimeout');
}, 0);
Promise.resolve().then(() => {
  console.log('promise');
});
console.log('end');

这段代码会输出以下结果：

start
promise
end
setTimeout

从输出结果可以看出，先执行了console.log('start')，然后执行了Promise.resolve().then(() => {console.log('promise');})，最后执行了console.log('end')。setTimeout(() => {console.log('setTimeout');}, 0);被放到了后面执行。这是因为Promise.resolve().then(() => {console.log('promise');})是一个微任务，而setTimeout(() => {console.log('setTimeout');}, 0);是一个宏任务。微任务队列的优先级高于事件队列，因此微任务队列中的微任务会先于事件队列中的事件执行。