HUA

关键词：事件循环案例

JavaScript 的事件循环在实际开发中有很多使用案例，以下是一些常见的例子：

一、异步操作处理

  1. 网络请求：

    • 当进行 AJAX 请求时，浏览器不会阻塞等待响应，而是继续执行其他代码。一旦请求完成，相应的回调函数会被添加到任务队列中，等待事件循环处理。

    • 例如，使用XMLHttpRequest或fetch进行网络请求：

       1function makeAjaxRequest(url) {
 2  return new Promise((resolve, reject) => {
 3    const xhr = new XMLHttpRequest();
 4    xhr.open("GET", url);
 5    xhr.onload = function () {
 6      if (xhr.status === 200) {
 7        resolve(xhr.responseText);
 8      } else {
 9        reject(new Error(xhr.statusText));
10      }
11    };
12    xhr.onerror = function () {
13      reject(new Error("Network error"));
14    };
15    xhr.send();
16  });
17}
18
19makeAjaxRequest("https://example.com/data")
20  .then((data) => {
21    console.log("Received data:", data);
22  })
23  .catch((error) => {
24    console.error("Error:", error);
25  });

    • 在这个例子中，网络请求是异步的，不会阻塞主线程。当请求完成后，对应的then或catch回调函数会被执行。

  2. 定时器：

    • setTimeout和setInterval函数会在指定的时间后将回调函数添加到任务队列中。

    • 例如：

       1console.log("Start");
 2setTimeout(() => {
 3  console.log("Timeout after 1 second");
 4}, 1000);
 5console.log("End");

    • 输出结果为“Start”、“End”，然后在 1 秒后输出“Timeout after 1 second”。这表明setTimeout的回调函数是在主线程执行完其他代码后，由事件循环处理执行的。

二、用户交互响应

  1. 按钮点击事件：

    • 当用户点击按钮时，会触发相应的点击事件处理程序。这些处理程序会被添加到任务队列中，等待事件循环处理。

    • 例如：

       1<button id="myButton">Click me</button>
 2<script>
 3  document.getElementById("myButton").addEventListener("click", function () {
 4    console.log("Button clicked");
 5  });
 6</script>

    • 当用户点击按钮时，“Button clicked”会被输出。这种方式确保了用户交互不会阻塞主线程，使得界面保持响应。

  2. 输入框实时验证：

    • 可以使用事件循环来实现输入框的实时验证。当用户在输入框中输入内容时，触发input事件，相应的验证函数会被添加到任务队列中，进行异步验证。

    • 例如：

       1<input type="text" id="myInput" />
 2<script>
 3  document.getElementById("myInput").addEventListener("input", function () {
 4    const value = this.value;
 5    setTimeout(() => {
 6      if (value.length < 5) {
 7        console.log("Input too short");
 8      } else {
 9        console.log("Input valid");
10      }
11    }, 500);
12  });
13</script>

    • 在这个例子中，每次用户输入时，会在 500 毫秒后进行验证。如果输入长度小于 5，则输出“Input too short”；否则输出“Input valid”。

三、动画和界面更新

  1. 动画循环：

    • 使用requestAnimationFrame函数可以创建一个动画循环，在每一帧更新动画状态并重新绘制界面。这个函数会在浏览器下一次重绘之前调用指定的回调函数，确保动画的流畅性。

    • 例如：

       1function animate() {
 2  // 更新动画状态
 3  // 例如，移动一个元素的位置
 4  element.style.left = parseInt(element.style.left) + 1 + 'px';
 5
 6  if (/* 动画未完成条件 */) {
 7    requestAnimationFrame(animate);
 8  }
 9}
10
11requestAnimationFrame(animate);

    • 在这个例子中，animate函数会在每一帧更新元素的位置，直到动画完成。requestAnimationFrame确保了动画在浏览器的最佳时机进行更新，避免了不必要的重绘和性能浪费。

  2. 界面更新：

    • 在复杂的界面应用中，可以使用事件循环来异步更新界面，避免阻塞主线程。例如，当有大量数据需要渲染到界面上时，可以将渲染过程分成小块，每次在事件循环的空闲时间进行一部分渲染。

    • 例如：

       1function updateUI(data) {
 2  const chunkSize = 10;
 3  let index = 0;
 4
 5  function renderChunk() {
 6    for (let i = index; i < index + chunkSize && i < data.length; i++) {
 7      // 渲染数据的一部分到界面上
 8      const item = data[i];
 9      const element = document.createElement("div");
10      element.textContent = item;
11      document.body.appendChild(element);
12    }
13    index += chunkSize;
14
15    if (index < data.length) {
16      requestIdleCallback(renderChunk);
17    }
18  }
19
20  requestIdleCallback(renderChunk);
21}
22
23const largeData = Array.from({ length: 1000 }, (_, i) => `Item ${i}`);
24updateUI(largeData);

    • 在这个例子中，updateUI函数将大量数据分成小块进行渲染，每次在浏览器空闲时间（使用requestIdleCallback）进行一部分渲染，避免了长时间阻塞主线程，使得界面保持响应。

个人笔记记录 2021 ~ 2025