防抖是让函数在连续触发中只执行最后一次，适用于搜索框输入等场景；核心是清除前次定时器并重设新定时器，需注意this绑定、闭包隔离及引用一致性。
防抖（debounce）不是“阻止函数执行”，而是让函数在连续触发中只执行最后一次——适用于搜索框输入、窗口缩放等场景，核心是“等停了再干”。
debounce 函数怎么写才靠谱
手写一个基础但可用的 debounce，关键在于每次调用时清除上一次的定时器，并重设新定时器：
function debounce(fn, delay) {
let timer = null;
return function(...args) {
clearTimeout(timer);
timer = setTimeout(() => fn.apply(this, args), delay);
};
}
注意点：
-
fn.apply(this, args)保证原函数的this和参数正确传递，不能直接写fn(...args)（会丢失上下文） - 必须把
timer声明在闭包内，否则多个 debounce 实例会互相覆盖 - 如果需要立即执行首次调用（leading edge），得额外加标志位和逻辑，基础版默认只支持 trailing（末次执行）
为什么用 lodash.debounce 却还是没生效
常见失效原因不是函数写错，而是引用没对齐：
立即学习“Java免费学习笔记（深入）”；
- 没把 debounced 函数“存起来”反复使用——比如每次渲染都重新
debounce(handleInput, 300)，等于每次都新建一个闭包，旧定时器还在跑，新函数完全无关 - 在 React 中直接写
onChange={debounce(fn, 300)}，每次 render 都生成新函数，导致事件绑定失效或内存泄漏 - 没处理
cancel()：比如组件卸载前应调用 debounced 函数的cancel方法（lodash 提供），否则定时器仍在后台执行，可能引发 setState 报错
防抖和节流（throttle）到底该选谁
看响应频率需求：
- 用户输入搜索、校验表单字段 → 用
debounce：只要他停了就查，中间狂敲都不发请求 - 监听
scroll或resize并更新 UI 布局 → 用throttle：哪怕用户一直拖，也要至少每 100ms 更新一次，否则界面卡顿 - 误用后果：
debounce用于滚动会导致“松手才更新”，体验像卡顿；throttle用于搜索会漏掉最后输入，搜出旧结果
真正难的不是实现那几行代码，是想清楚“这次交互里，用户期待的是‘停了才响应’，还是‘持续中也要反馈’”。这个判断错了，后面所有优化都是往反方向使劲。
