Web 开发中的节流和去抖动

滚动、调整大小或键入等事件经常会重复触发功能，有时在几秒钟内触发数百次。想象一下，当用户键入时，搜索栏会从服务器获取建议，或者当浏览器窗口发生变化时，调整大小处理程序会不断调整布局。如果不加以控制，这些功能可能会使浏览器过载，降低用户体验，甚至会因过多的 API 请求而增加服务器成本。

这就是节流和去抖发挥作用的地方。这两种技术有助于管理响应频繁事件而执行函数的频率，使应用程序更流畅、更高效、响应更快。在本指南中，我们将探讨这些概念，检查它们的差异，并了解每个概念如何在特定用例中优化性能。

了解节流和去抖动

限制是一种强制函数执行受控、定期间隔的技术，无论触发事件发生的频率如何。通过限制指定时间段内的调用，限制可确保函数以可预测的方式（稳定且一致）调用，而不是随着事件发生而频繁调用。对于定期执行函数可以改善用户体验而又不会压垮系统的情况来说，这是理想的选择。

另一方面，去抖动会延迟函数的执行，直到经过设定的时间段而不再触发事件。本质上，它在调用函数之前等待活动“暂停”，这使得它在只有在用户活动平息后才应发生操作的情况下非常有用。例如，等到用户完成输入后再在搜索字段中进行 API 调用，可以防止不必要的请求并优化性能。

主要特点

节流的主要特征

• 执行频率：限制强制执行最大执行率。例如，如果连续触发事件（例如调整窗口大小），则限制可确保该函数在每个定义的时间间隔仅运行一次。

• 一致速率：此技术保持稳定、受控的执行速度，避免大量的函数调用并允许函数行为的可预测性。

去抖动的主要特征

• 基于延迟的执行：函数仅在最后一个事件发生后一定延迟后执行，有助于避免过度执行。

• 事件停止后单次执行：如果事件继续，函数调用会重复延迟，仅在活动停止后执行 - 对于仅在用户完成操作（例如键入）后才应发生操作的输入来说是理想的选择。

节流和去抖动用例

这些技术在不同的场景中大放异彩：

• 限制用例：

  • 滚动事件：限制对于由以下事件触发的操作有效 滚动，例如内容加载，可以预见地发生 并持续不断地不会压垮界面。
  • 调整大小事件：由窗口调整大小触发的频繁调用是 通过节流控制，允许间隔调整 而不是每次调整大小时都进行更改。

• 去抖用例：

  • 搜索输入：对于搜索字段，去抖可防止不必要的 API 请求仅等待用户停止输入 一段时间不活动后执行。
  • 调整大小事件：与限制类似，消除调整大小事件的抖动是 有助于确保布局调整仅发生一次，之后 调整大小完成。

实际例子

JavaScript 中的限制
以下是如何实施节流来限制函数执行的频率：

function throttle(func, delay) {
  let lastCall = 0;
  return function (...args) {
    const now = Date.now();
    if (now - lastCall >= delay) {
      func(...args);
      lastCall = now;
    }
  };
}

const throttledScrollHandler = throttle(() => {
  console.log("Handling scroll event...");
}, 1000);

window.addEventListener("scroll", throttledScrollHandler);

在此示例中，throttle 函数确保 ThreattedScrollHandler 仅每 1000 毫秒（1 秒）调用一次，即使用户快速滚动也是如此。这样可以节省系统资源并提高用户体验。

JavaScript 中的去抖
对于去抖动，这里有一种延迟函数执行直到事件停止的方法：

function debounce(func, delay) {
  let timeoutId;
  return function (...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func(...args), delay);
  };
}

const debouncedSearch = debounce((query) => {
  console.log(`Searching for: ${query}`);
}, 300);

const searchInput = document.getElementById("search-input");
searchInput.addEventListener("input", (event) => {
  debouncedSearch(event.target.value);
});

在这种情况下，debouncedSearch 函数仅在键入停止后执行 300 毫秒。每次击键都会重置延迟计时器，因此该功能会等待用户完成输入，从而优化性能和用户体验。

结论

节流和去抖动是优化高频事件的重要技术，可带来更流畅的用户体验和高效的资源利用。通过理解这些技术并仔细应用它们，开发人员可以控制函数执行速率，从而增强前端性能和系统响应能力。

关注我，了解有关 React、TypeScript 和现代 Web 开发实践的更多见解！？‍？

以上是Web 开发中的节流和去抖动的详细内容。更多信息请关注PHP中文网其他相关文章！