函数防抖与节流：见招拆招，把控频率，提升体验

前端

2023-10-28 19:51:44

函数防抖与函数节流：让你的代码游刃有余

在现代网络应用程序中，处理高频事件和间隔事件是至关重要的。函数防抖和函数节流是两种强大的工具，可以帮助我们优化代码，提高用户体验。

函数防抖：只为关键时刻

想象一下你在使用搜索引擎，随着你输入每个字符，搜索结果都在不断更新。这种过于频繁的更新会让人分心，降低你的搜索效率。函数防抖应运而生，它通过抑制函数的执行，只允许最后一次触发生效，解决了这个问题。

在函数防抖中，我们使用计时器函数 setTimeout()。当函数被触发时，它启动一个计时器。如果在计时器结束之前函数再次被触发，计时器将被重置，等待时间将重新开始。只有当计时器倒计时结束时，函数才会真正执行。

函数防抖的应用场景

函数防抖在以下场景中非常有用：

搜索建议： 防止搜索建议过于频繁地更新，从而提高用户体验。
表单验证： 减少不必要的网络请求，让表单验证在用户停止输入后再触发。
滚动事件处理： 提高页面滚动性能，防止滚动事件处理程序过于频繁地触发。

代码示例：

function debounce(func, wait) {
  let timeoutId;
  return function () {
    const args = arguments;
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), wait);
  };
}

const searchSuggestions = document.getElementById('search-suggestions');
const searchInput = document.getElementById('search-input');

searchInput.addEventListener('input', debounce(() => {
  // 获取并显示搜索建议
}, 250));

函数节流：按部就班

与函数防抖相反，函数节流限制函数在一定时间间隔内只执行一次。这对于需要在一定时间间隔内执行的函数非常有用，例如窗口大小改变或页面滚动。

函数节流同样利用 setTimeout()。当函数被触发时，它首先检查上一次函数执行的时间戳。如果当前时间与上一次函数执行的时间戳之间的间隔小于设定的时间间隔，则函数不会执行。只有当间隔大于或等于设定的时间间隔时，函数才会执行。

函数节流的应用场景

函数节流适用于以下场景：

窗口大小改变： 防止窗口大小改变事件处理程序过于频繁地触发，从而提高页面响应速度。
页面滚动： 提高页面滚动性能，防止页面滚动事件处理程序过于频繁地触发。
AJAX 请求： 防止 AJAX 请求过于频繁地发送，避免服务器过载。

代码示例：

function throttle(func, wait) {
  let isThrottled = false;
  let savedArgs;
  let savedThis;

  return function () {
    if (isThrottled) {
      savedArgs = arguments;
      savedThis = this;
      return;
    }

    func.apply(this, arguments);

    isThrottled = true;

    setTimeout(() => {
      isThrottled = false;
      if (savedArgs) {
        func.apply(savedThis, savedArgs);
        savedArgs = null;
        savedThis = null;
      }
    }, wait);
  };
}

const windowResizeHandler = document.getElementById('window-resize-handler');

window.addEventListener('resize', throttle(() => {
  // 处理窗口大小改变事件
}, 250));