Event loop 事件循环

事件循环是JavaScript中的一种机制，用于管理和调度各种事件的执行顺序。在JavaScript中，事件可以是用户交互（如点击按钮、输入文本）或是异步操作（如获取数据、定时器）等。

事件循环基于单线程的特性，所有的事件都被放入一个事件队列中，然后按照先进先出的原则逐个执行。当事件被触发时，会在事件队列中添加一个对应的事件处理函数，并等待当前任务执行完毕后执行。

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

事件触发：当一个事件被触发时，会将该事件添加到事件队列中等待执行。
任务队列：任务队列是一个用来存放待执行任务的队列。任务分为宏任务（macro task）和微任务（micro task）两种类型。宏任务包括script代码块、setTimeout、setInterval等，而微任务包括Promise、MutationObserver等。
事件循环机制：事件循环会不断地从事件队列中取出事件并执行对应的事件处理函数。首先会执行所有的微任务，然后执行一个宏任务，再执行所有的微任务，依次循环执行，直到事件队列中没有任务为止。

通过事件循环，JavaScript可以实现异步编程，避免了阻塞主线程。同时，事件循环也保证了事件处理的顺序，避免了并发操作的问题。

下面是一个简单的示例，展示了JavaScript中事件循环的工作原理：

代码语言：javascript复制

console.log("Start");

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

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

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

console.log("End");

运行上述代码的输出结果将是：

代码语言：javascript复制

Start
End
Promise 1
Promise 2
Timeout 1

解释：

首先，"Start" 被打印出来。
接着，setTimeout函数被调用并将一个回调函数添加到任务队列中。由于 timeout 的设定为 0，所以这个回调函数将立即执行。
然后，两个Promise.resolve()被调用，并将两个回调函数添加到微任务队列中。微任务队列的优先级比任务队列高，所以它们会在任务队列中的回调函数之前执行。
最后，"End" 被打印出来。
事件循环开始，事件循环首先会执行微任务队列中的回调函数。Promise 1 和 Promise 2 被打印出来。
接着，事件循环会从任务队列中取出一个回调函数执行。"Timeout 1" 被打印出来。

事件循环是一个循环过程，它会不断地从任务队列中取出回调函数执行，直到任务队列和微任务队列都为空。同时，JavaScript中还有其他类型的事件和任务，如IO操作、UI渲染等，也会加入到任务队列中，并由事件循环执行。以上代码仅供演示事件循环的基本机制，实际中可能还涉及更多复杂的情况。

这是一个稍微复杂的事件循环示例，展示了异步操作和事件之间的交互：

代码语言：javascript复制

console.log("Start");

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

const fetchData = () => {
  console.log("Fetching data...");
  setTimeout(() => {
    console.log("Data fetched");
  }, 2000);
};

const handleClick = () => {
  console.log("Button clicked");
  setTimeout(() => {
    console.log("Finished handling click");
  }, 1000);
};

document.addEventListener("DOMContentLoaded", () => {
  console.log("DOM Content Loaded");
  fetchData();
});

document.querySelector("#btn").addEventListener("click", handleClick);

console.log("End");

运行上述代码的输出结果将是：

代码语言：javascript复制

Start
End
DOM Content Loaded
Fetching data...
Button clicked
Timeout
Data fetched
Finished handling click

解释：

首先，"Start" 被打印出来。
接着，setTimeout函数被调用并将一个回调函数添加到任务队列中。
fetchData 函数被调用，打印 "Fetching data..."。
在 fetchData 中，又通过 setTimeout 将另一个回调函数添加到任务队列中。
document.addEventListener("DOMContentLoaded") 用于在DOM加载完成后执行回调函数。
当整个DOM加载完成后，"DOM Content Loaded" 被打印出来。
document.querySelector("#btn").addEventListener("click") 用于监听按钮的点击事件。
当按钮被点击时，handleClick函数被调用，打印 "Button clicked"。
同样地，通过 setTimeout 又将另一个回调函数添加到任务队列中。
接着，"End" 被打印出来。
事件循环开始，事件循环首先会执行微任务队列中的回调函数。由于微任务队列中只有一个回调函数，它被打印出来，即 "Data fetched"。
接着，事件循环会从任务队列中取出一个回调函数执行。"Timeout" 被打印出来。
最后，在执行完其他的任务之后，"Finished handling click" 被打印出来。

以上示例仅仅是展示了事件循环的基本机制，实际的应用中可能会有更多复杂的异步操作和事件处理，所以事件循环的顺序和执行时间可能会有所不同。

事件循环在JavaScript中有许多应用场景，以下是几个常见的例子：

用户交互响应：当用户与网页进行交互时，例如点击按钮、输入文本或滚动页面等，这些事件会被添加到事件队列中，并通过事件循环机制执行对应的事件处理函数。
异步操作：JavaScript中的许多异步操作，如获取数据、发送请求、定时器等，都可以通过事件循环实现。异步操作会将回调函数添加到任务队列中，在合适的时机被执行。
动画处理：当需要实现动画效果时，可以使用requestAnimationFrame函数，它会在每一帧绘制前触发回调函数，并通过事件循环机制实现流畅的动画效果。
Promise和async/await：Promise和async/await是一种用于处理异步操作的语法糖，它们背后的实现原理就是基于事件循环机制的微任务。通过Promise和async/await可以更方便地处理异步操作，并避免了回调地狱的问题。
事件委托：事件委托是一种优化事件处理的方式，它将事件处理函数绑定在父元素上，通过事件冒泡的机制处理子元素的事件。这样可以减少事件处理函数的数量，提高性能，也是基于事件循环的机制实现的。

事件循环可以应用于任何需要异步处理和事件顺序控制的场景。它提供了一种机制，使得JavaScript能够处理用户交互、实现异步操作和动画效果等，同时保证了事件处理的顺序与可控性。

异步 event 队列函数事件

0 人点赞