一、事件循环的定义

JavaScript事件循环是一种机制，用于处理异步事件和回调函数。
它是JavaScript运行时环境的一部分，负责管理事件队列和调用栈。

二、事件循环的基本原理

当JavaScript代码执行时，所有同步任务都会被立即执行，而异步任务则会被放入事件队列中。

当所有同步任务执行完毕后，事件循环会从事件队列中取出一个任务，并将其放入调用栈中执行。

如果队列为空，JavaScript会等待新的任务加入队列。

当该任务执行完毕后，事件循环会再次从事件队列中取出下一个任务，并重复这个过程。

2.1、事件循环的执行过程

同步：前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的，同步的。比如：我们要烧水煮饭，等水开了（10分钟后），再去切菜，炒菜

异步：你在做一件事情时，因为这件事会花费很长时间，在做这件事的同时，你还可以去处理其他事情。比如烧水的10分钟内，去切菜，炒菜

同步任务：在主线程上排队执行任务，只有前一个任务执行完毕，才能执行后一个任务

异步任务：不进入主线程，而是进入"任务队列"的任务

3.2、宏任务&微任务

异步任务又分为宏任务和微任务

1、宏任务包括setTimeout、setInterval、I/O操作等。

2、微任务包括Promise、MutationObserver等。

当事件循环从事件队列中取出一个任务时，它会先执行所有微任务，然后再执行一个宏任务。这个过程会一直重复，直到事件队列中的所有任务都被执行完毕。

image.png

下面是一个例子：

console.log("1");

setTimeout(function () {
  console.log("2");
  Promise.resolve().then(function () {
    console.log("3");
  });
}, 0);

Promise.resolve().then(function () {
  console.log("4");
});
console.log("5"); //1 5 4 2 3

执行顺序：

• 执行第一个console.log，输出1。
• 执行setTimeout，将其回调函数放入宏任务队列中。
• 执行Promise.resolve().then，将其回调函数放入微任务队列中。
• 执行第二个console.log，输出5。
• 当前任务执行结束，执行微任务队列中的所有任务，输出4。
• 执行宏任务队列中的第一个任务，即setTimeout的回调函数，输出2。
• 执行Promise.resolve().then的回调函数，输出3。

需要注意的是，微任务和宏任务的执行顺序是固定的，即先执行所有微任务，再执行宏任务。因此，如果在一个宏任务中产生了新的微任务，那么这些微任务会在下一个宏任务执行之前执行。

下面是一个例子：

console.log("1");

setTimeout(function () {
  console.log("2");
  Promise.resolve().then(function () {
    console.log("3");
  });
}, 0);

Promise.resolve().then(function () {
  console.log("4");
  setTimeout(function () {
    console.log("5");
  }, 0);
});

console.log("6");

// 输出结果为：1 6 4 2 3 5

执行顺序：

• 执行第一个console.log，输出1。
• 执行setTimeout，将其回调函数放入宏任务队列中。
• 执行Promise.resolve().then，将其回调函数放入微任务队列中。
• 执行第三个console.log，输出6。
• 当前任务执行结束，执行微任务队列中的所有任务，输出4。
• 执行宏任务队列中的第一个任务，即setTimeout的回调函数，输出2。
• 执行Promise.resolve().then的回调函数，将setTimeout的回调函数放入宏任务队列中。
• 当前任务执行结束，执行微任务队列中的所有任务，输出3。
• 执行宏任务队列中的第一个任务，即setTimeout的回调函数，输出5。