如何处理 JavaScript 中的函数防抖问题？

疯狂的沙粒

已于 2025-01-04 10:36:36 修改

阅读量662

点赞数 16

CC 4.0 BY-SA版权

分类专栏： JavaScript 问题专栏文章标签： javascript 开发语言前端

于 2025-01-04 10:35:39 首次发布

本文链接：https://blog.youkuaiyun.com/huang3513/article/details/144925166

JavaScript 问题专栏专栏收录该内容

66 篇文章

订阅专栏

在 JavaScript 中，函数防抖（Debouncing）是一种控制函数执行频率的技术，通常用于处理用户输入事件（例如键盘输入、滚动事件等）。防抖的核心思想是：在连续触发某个事件时，只有在事件停止触发一定时间后才会执行对应的函数。

防抖的常见场景包括：

用户输入搜索框时，在输入停止后才发起搜索请求。
窗口缩放或滚动时，避免频繁触发 resize 或 scroll 事件。

防抖的基本原理：

防抖会将事件的触发延迟一定时间，如果在这段时间内事件再次触发，则重新计时。只有在事件触发后一定时间没有新的触发，才会执行相应的函数。

防抖的实现

我们可以使用 setTimeout 来实现防抖，以下是一个简化的防抖函数实现：

// 防抖函数
function debounce(func, delay) {
  let timeoutId;
  
  return function (...args) {
    // 每次触发时，清除前一次的定时器
    if (timeoutId) {
      clearTimeout(timeoutId);
    }
    
    // 设置新的定时器
    timeoutId = setTimeout(() => {
      func(...args);
    }, delay);
  };
}

防抖函数的使用

假设我们有一个搜索框，用户输入时想要调用 search 函数进行搜索请求，但我们希望只有在用户停止输入超过 500 毫秒时才发起请求。

// 假设这是你的搜索函数
function search(query) {
  console.log('Searching for:', query);
  // 这里可以执行真正的搜索请求，比如 AJAX 调用
}

// 创建防抖函数，延迟 500 毫秒
const debouncedSearch = debounce(search, 500);

// 绑定事件到搜索框
const input = document.getElementById('search-input');
input.addEventListener('input', function(event) {
  debouncedSearch(event.target.value);
});

代码说明

debounce(func, delay)：这个函数接受一个目标函数 func 和一个延迟时间 delay。返回的函数会在每次事件触发时重置定时器，确保目标函数 func 只有在一定时间内没有事件触发时才会执行。
search(query)：这是我们要防抖的目标函数，模拟执行搜索请求。
debouncedSearch：这是防抖后的版本，它接收用户输入，只有在输入停止超过 500 毫秒时，才会触发 search 函数。
input.addEventListener('input', ...)：为搜索框绑定 input 事件，每次输入时，都会调用 debouncedSearch。

使用防抖的效果

用户快速输入时，debouncedSearch 会多次被调用，但 search 函数只会在用户停止输入超过 500 毫秒后被执行一次。
这样避免了每输入一个字符就发起请求，减少了不必要的网络请求，优化了性能。

防抖的应用场景

搜索框输入：防止用户每输入一个字符都触发请求，减轻服务器压力。
窗口调整大小：防止在窗口大小变化时频繁触发事件，优化性能。
滚动监听：避免在滚动事件频繁触发时进行高频次的操作（例如加载数据等）。

使用 Lodash 库的防抖

Lodash 是一个常用的 JavaScript 库，其中提供了内建的 debounce 方法，我们可以直接使用它来实现防抖功能：

// 使用 Lodash 的 debounce
const debouncedSearch = _.debounce(search, 500);

input.addEventListener('input', function(event) {
  debouncedSearch(event.target.value);
});