JavaScript防抖是什么_它如何优化性能？

防抖是将多次连续调用合并为最后一次执行的技术，用于高频事件如输入、缩放、滚动，通过setTimeout与clearTimeout控制延迟执行，避免资源浪费。

JavaScript防抖（Debounce）是一种限制函数执行频率的技术，核心思想是：**把多次连续的调用合并成最后一次执行**。它特别适合处理高频触发事件（比如窗口缩放、输入框搜索、滚动监听），避免函数被无意义地反复调用，从而显著减少计算量、降低渲染压力、节省资源。

防抖解决什么问题？

很多用户交互会瞬间触发几十甚至上百次事件。例如：

• 用户在搜索框快速输入“react”，每按一个键就触发一次 input 事件 → 默认会调用 6 次请求或校验逻辑；
• 拖拽调整浏览器窗口大小，resize 事件可能在几百毫秒内触发数十次；
• 滚动页面时 scroll 事件频繁触发，若每次都在回调里计算元素位置，容易卡顿。

这些场景下，中间的多数调用不仅没必要，还浪费 CPU 和网络资源。防抖就是让系统“等一等”，只响应最后那一下。

防抖怎么实现？

本质是用 setTimeout + clearTimeout 控制执行时机：

• 每次触发时，先清除上一次设定的定时器；
• 再重新设置一个新的定时器，延迟执行目标函数；
• 如果在延迟期间再次触发，就又清掉重设——只有“静默”够久，函数才会真正运行。

简单示例：

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

// 使用：输入停止 300ms 后才搜索
const search = debounce(() => {
  console.log('发起搜索请求');
}, 300);

input.addEventListener('input', search);

和节流（Throttle）有什么区别？

防抖和节流都用于限频，但策略不同：

• 防抖：只响应“最后一次”，适合需要“最终结果”的场景，如搜索、表单验证、窗口尺寸最终值；
• 节流：固定时间间隔内最多执行一次，适合需要“持续反馈”的场景，如滚动加载、鼠标跟随、游戏帧更新。

一句话记住：防抖是“等你停下再干”，节流是“我按自己的节奏来”。

使用时要注意什么？

防抖看似简单，实际用错很常见：

• this 和参数丢失：记得用 fn.apply(this, args) 或箭头函数绑定上下文；
• 立即执行需求：标准防抖不支持首次立刻执行，如需“第一次马上执行，之后防抖”，得扩展逻辑（叫 leading edge）；
• 清理副作用：如果防抖函数里发了请求，而新请求发出前旧请求还没完成，建议配合 AbortController 取消上一个；
• 延迟值要合理：太短（如 50ms）起不到效果，太长（如 1s）会让用户觉得卡顿，通常 100–300ms 较平衡。

基本上就这些。防抖不是黑科技，但用对了，能悄悄让页面顺滑不少。