JavaScript防抖函数详解及实际应用示例

当然可以！防抖（Debounce）是一种常见的前端优化技术，主要用于限制某个函数在短时间内被频繁调用。防抖的核心思想是：在一定时间内，如果函数被多次触发，只执行最后一次调用，忽略之前的调用。

下面是一个简单的防抖函数实现：

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

参数说明：

• func：需要防抖的函数。
• wait：等待时间（毫秒），在 wait 时间内如果函数再次被触发，则重新计时。

使用示例：

假设你有一个输入框，希望在用户停止输入 300 毫秒后执行搜索操作：

// 需要防抖的函数
function search(query) {
  console.log(`Searching for: ${query}`);
}

// 创建防抖函数，等待时间为 300 毫秒
const debouncedSearch = debounce(search, 300);

// 绑定到输入框的输入事件
const input = document.querySelector('input');
input.addEventListener('input', function(event) {
  debouncedSearch(event.target.value);
});

解释：

1. 用户在输入框中输入内容时，input 事件会频繁触发。
2. 每次触发时，debouncedSearch 函数会被调用，但真正的 search 函数只有在用户停止输入 300 毫秒后才会执行。
3. 如果在 300 毫秒内用户再次输入，之前的计时会被清除，重新开始计时。

适用场景：

• 输入框实时搜索
• 窗口大小调整事件
• 按钮频繁点击防止重复提交

希望这个解释对你有帮助！如果还有其他问题，随时告诉我哦！ 😊