防抖是将多次连续调用合并为最后一次执行的技术，用于高频事件如输入、缩放、滚动，通过setTimeout与clearTimeout控制延迟执行，避免资源浪费。
JavaScript防抖（Debounce）是一种限制函数执行频率的技术，核心思想是：**把多次连续的调用合并成最后一次执行**。它特别适合处理高频触发事件（比如窗口缩放、输入框搜索、滚动监听），避免函数被无意义地反复调用，从而显著减少计算量、降低渲染压力、节省资源。
防抖解决什么问题？
很多用户交互会瞬间触发几十甚至上百次事件。例如：
- 用户在搜索框快速输入“react”，每按一个键就触发一次 input 事件 → 默认会调用 6 次请求或校验逻辑；
- 拖拽调整浏览器窗口大小，resize 事件可能在几百毫秒内触发数十次；
- 滚动页面时 scroll 事件频繁触发，若每次都在回调里计算元素位置，容易卡顿。
这些场景下，中间的多数调用不仅没必要，还浪费 CPU 和网络资源。防抖就是让系统“等一等”，只响应最后那一下。
防抖怎么实现？
本质是用 setTimeout + clearTimeout 控制执行时机：
立即学习“Java免费学习笔记（深入）”；
React Best Practices 2 0.1.0
下载
React 与 Next.js 性能优化指南，源自 Vercel 工程团队。适用于编写、审查或重构 React/Next.js 代码时使用。
- 每次触发时，先清除上一次设定的定时器；
- 再重新设置一个新的定时器，延迟执行目标函数；
- 如果在延迟期间再次触发，就又清掉重设——只有“静默”够久，函数才会真正运行。
简单示例：
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 较平衡。
基本上就这些。防抖不是黑科技，但用对了，能悄悄让页面顺滑不少。
