Web 开发中的节流和去抖动-js教程-PHP中文网

Web 开发中的节流和去抖动

Susan Sarandon

发布： 2024-11-01 17:14:30

原创

570 人浏览过

Throttling and Debouncing in Web Development

滚动、调整大小或键入等事件经常会重复触发功能，有时在几秒钟内触发数百次。想象一下，当用户键入时，搜索栏会从服务器获取建议，或者当浏览器窗口发生变化时，调整大小处理程序会不断调整布局。如果不加以控制，这些功能可能会使浏览器过载，降低用户体验，甚至会因过多的 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 毫秒。每次击键都会重置延迟计时器，因此该功能会等待用户完成输入，从而优化性能和用户体验。