一文详解JS中的事件循环机制

JavaScript 是一门单线程语言，这意味着 JavaScript 代码只能在一个线程中执行。但是，JavaScript 又是一门非常强大的语言，它可以处理各种异步操作，例如网络请求、定时器等。这是因为 JavaScript 中有一个事件循环机制，它可以让 JavaScript 在单线程中处理异步操作。本文将详细讲解 JavaScript 中的事件循环机制，包括事件循环的基本原理、任务队列、宏任务和微任务等概念，以及两个示例说明。

事件循环的基本原理

JavaScript 中的事件循环机制是基于事件循环队列的。事件循环队列是一个先进先出的队列，用于存储 JavaScript 中的任务。当 JavaScript 引擎执行完当前任务后，它会从事件循环队列中取出下一个任务并执行。这个过程会一直重复，直到事件循环队列为空。

任务队列

JavaScript 中的任务分为两种：宏任务和微任务。宏任务是指由浏览器或 JavaScript 引擎发起的任务，例如定时器、网络请求、DOM 事件等。微任务是指由 JavaScript 代码发起的任务，例如 Promise、MutationObserver 等。

JavaScript 中有两个任务队列：宏任务队列和微任务队列。当 JavaScript 引擎执行完一个宏任务后，它会先执行微任务队列中的所有任务，然后再从宏任务队列中取出下一个任务并执行。这个过程会一直重复，直到事件循环队列为空。

宏任务和微任务

宏任务和微任务的区别在于它们的执行顺序。当 JavaScript 引擎执行完一个宏任务后，它会先执行微任务队列中的所有任务，然后再执行下一个宏任务。这意味着微任务的优先级比宏任务高。

下面是两个示例，分别演示了宏任务和微任务的执行顺序。

示例一：宏任务和微任务的执行顺序

在这个示例中，我们演示了宏任务和微任务的执行顺序。首先，我们使用 setTimeout() 函数创建了一个定时器，它会在 0 秒后向宏任务队列中添加一个任务。然后，我们使用 Promise.resolve() 函数创建了一个 Promise 对象，它会在微任务队列中添加一个任务。最后，我们输出了一条信息，它会在当前任务执行完后立即执行。例如：

console.log('start');

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

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

console.log('end');

在上面的代码中，我们首先输出了一条信息 "start"，然后向宏任务队列中添加了一个定时器任务和向微任务队列中添加了一个 Promise 任务。最后，我们输出了一条信息 "end"。

当 JavaScript 引擎执行完当前任务后，它会先执行微任务队列中的所有任务，然后再执行宏任务队列中的任务。因此，上面的代码会先输出 "start" 和 "end"，然后输出 "Promise" 和 "setTimeout"。

示例二：异步操作的执行顺序

在这个示例中，我们演示了异步操作的执行顺序。首先，我们使用 setTimeout() 函数创建了一个定时器，它会在 0 秒后向宏任务队列中添加一个任务。然后，我们使用 Promise.resolve() 函数创建了一个 Promise 对象，它会在微任务队列中添加一个任务。最后，我们在 Promise 对象的回调函数中又创建了一个 Promise 对象，它也会在微任务队列中添加一个任务。例如：

console.log('start');

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

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

console.log('end');

在上面的代码中，我们首先输出了一条信息 "start"，然后向宏任务队列中添加了一个定时器任务和向微任务队列中添加了一个 Promise 任务。在 Promise 任务的回调函数中，我们又向微任务队列中添加了一个 Promise 任务。最后，我们输出了一条信息 "end"。

当 JavaScript 引擎执行完当前任务后，它会先执行微任务队列中的所有任务，然后再执行宏任务队列中的任务。因此，上面的代码会先输出 "start" 和 "end"，然后输出 "Promise1" 和 "Promise2"，最后输出 "setTimeout"。

总结

JavaScript 中的事件循环机制是基于事件循环队列的。事件循环队列是一个先进先出的队列，用于存储 JavaScript 中的任务。JavaScript 中有两个任务队列：宏任务队列和微任务队列。当 JavaScript 引擎执行完一个宏任务后，它会先执行微任务队列中的所有任务，然后再从宏任务队列中取出下一个任务并执行。宏任务和微任务的区别在于它们的执行顺序。当 JavaScript 引擎执行完一个宏任务后，它会先执行微任务队列中的所有任务，然后再执行下一个宏任务。这意味着微任务的优先级比宏任务高。