javascript防抖是什么_如何优化搜索框输入事件？_技术教程

防抖是将连续触发事件合并为最后一次执行，避免搜索框频繁请求导致资源浪费和UI错乱；核心是每次触发时清除旧定时器并重设新定时器，仅在用户停顿后执行。

防抖是什么？为什么搜索框必须用它

防抖（debounce）不是“防止抖动”，而是把连续触发的事件，合并成最后一次执行。搜索框里用户每敲一个字就发请求，不仅浪费带宽、压垮后端，还会让 UI 响应混乱——比如输入 react，中途发了 r、re、rea 等 6 次请求，其中前 5 次的结果可能比第 6 次还晚回来，导致界面上显示错误内容。

防抖的核心逻辑是：每次触发时，先清除上一次设的定时器，再重新设一个新定时器。只有用户停顿足够久（比如 300ms），才真正执行函数。

`debounce` 函数怎么写？别直接抄网上的“通用版”

很多教程给的 debounce 实现没处理 this 和参数绑定，也没暴露取消能力，在 React 或 Vue 组件里容易内存泄漏或上下文丢失。

必须用 setTimeout + clearTimeout，不能用 requestIdleCallback 或 Promise.delay 替代——它们不满足“取消前序任务”的语义
要用 func.apply(context, args) 保留原始调用上下文，否则在 class 方法里 this 会变成 undefined
返回的包装函数应带 cancel 方法，方便组件卸载时清理定时器

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

搜索框里怎么用？React 场景下特别注意这几点

在 React 函数组件中，不能把 debounce 直接包在 onChange 里每次渲染都新建——这会导致防抖计时器不断重置，失去意义；也不能写在事件回调里不加依赖控制，引发闭包捕获旧 state。

用 useCallback 包一层，并把 searchTerm 和请求函数作为依赖，确保每次值更新后防抖函数能拿到最新逻辑
在 useEffect 卸载时调用 debouncedSearch.cancel()，否则定时器可能在组件销毁后仍尝试 setState，触发警告 Can't perform a React state update on an unmounted component
不要对空字符串也发请求——在防抖函数内部加 if (!term.trim()) return;，比在请求层拦截更早省资源

const debouncedSearch = useCallback(
  debounce((term) => {
    if (!term.trim()) return;
    fetch(`/api/search?q=${encodeURIComponent(term)}`)
      .then(r => r.json())
      .then(data => setResults(data));
  }, 300),
  []
);

useEffect(() => {
  return () => debouncedSearch.cancel();
}, [debouncedSearch]);