如何在JavaScript中实现防抖（debounce）函数，并解释其工作原理？

如何在JavaScript中实现防抖（debounce）函数，并解释其工作原理？

回答：

防抖（debounce）是一种优化高频率触发函数执行的技术，常用于处理如窗口滚动、输入框输入等频繁触发的事件。它的核心思想是：在一定时间内，如果某个函数被多次调用，只执行最后一次调用。

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

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

使用示例：

const searchInput = document.getElementById('search');
searchInput.addEventListener('input', debounce(function(e) {
  console.log('搜索:', e.target.value);
}, 500));

解析：

1. debounce 函数接收两个参数：

   • func：需要防抖的实际执行函数。
   • delay：延迟执行的时间（毫秒）。

2. 内部使用一个闭包变量 timer 来保存 setTimeout 的定时器ID。

3. 每次事件触发时，都会先清除之前的定时器（clearTimeout(timer)），然后重新设置一个新的定时器。

4. 只有当在 delay 时间内没有再次触发该函数时，定时器才会执行 func。

5. 使用 apply(context, args) 确保原函数的 this 指向和参数正确传递。

应用场景：

• 搜索框输入联想（避免每次输入都发请求）
• 窗口调整大小（resize）时重新计算布局
• 滚动事件中执行某些操作

注意：

• 防抖适用于“只关心最后一次操作”的场景。
• 与节流（throttle）不同，节流是固定时间间隔执行一次，而防抖是“等待静止”。

通过这种方式，可以显著减少不必要的函数调用，提升性能。