防抖和节流需按业务意图选择：停操作后响应用 debounce，需过程反馈但限频用 throttle；debounce 要处理 this、参数、immediate 及清理定时器；throttle 时间戳版因首次立即执行更适用于滚动拖拽；Vue/React 中须在卸载时清理定时器，否则报错或内存泄漏；防抖节流非银弹，需同步 loading、scrollTop 等上下文逻辑。
防抖和节流不是“要不要用”的选择题，而是“哪个更贴合业务意图”的判断题：用户操作停了才响应，选 debounce；需要过程反馈但又不能太密，选 throttle。
怎么写一个靠谱的 debounce 函数？
核心就一条：每次触发都清掉上一个 setTimeout，只留最后一次的延时执行。但真实项目里光这样不够：
- 没处理
this和参数，回调里this会变成window或undefined（尤其在事件监听中） - 没加
immediate选项，按钮防重复点击时第一次必须立刻禁用，不能等 300ms 后才生效 - 函数返回后没保存引用，比如在 React 的
useEffect里每次渲染都重生成，等于白写
推荐基础版（带立即执行）：
function debounce(func, delay, immediate = false) {
let timer = null;
return function (...args) {
const context = this;
if (timer) clearTimeout(timer);
if (immediate && !timer) {
func.apply(context, args);
}
timer = setTimeout(() => {
if (!immediate) func.apply(context, args);
timer = null;
}, delay);
};
}
为什么 throttle 用时间戳版比定时器版更常用？
因为滚动、拖拽这类场景对“首次响应延迟”很敏感——用户一动鼠标就该有反馈，而不是卡顿 100ms 才动一下。时间戳版天然支持首次立即执行：
立即学习“Java免费学习笔记（深入）”；
- 记录上次执行的
lastTime，每次触发用Date.now()对比间隔 - 缺点是：如果用户在间隔末尾疯狂触发，最后一次可能被漏掉（比如 99ms 内触发 10 次，第 10 次刚好卡在
now - lastTime ） - 进阶解法是“时间戳 + 尾部定时器”双保险，但多数场景用纯时间戳版已足够
简单可用的时间戳版：
function throttle(func, delay) {
let lastTime = 0;
return function (...args) {
const now = Date.now();
if (now - lastTime >= delay) {
func.apply(this, args);
lastTime = now;
}
};
}Vue/React 里直接套 debounce 会出什么问题？
不是函数写得不对，而是生命周期没管好：
- 组件卸载了，
setTimeout还在跑 →this变成null，报 “Cannot read property ‘xxx’ of null” - 在 Vue 3 的
setup或 React 的useEffect里没做清理，定时器持续占用内存 - 把
debounce(fn, 300)写在模板绑定里（如@input="debounce(...)"），每次 render 都新建函数 → 防抖失效
正确姿势：
- Vue 3：
onBeforeUnmount里手动clearTimeout（需提前用ref存住 timer） - React：封装成
useDebounceCallback自定义 Hook，内部用useEffect清理 - 优先用
lodash-es的debounce，它返回的函数自带cancel方法，清理更可控
最常被忽略的一点：防抖节流不是性能“银弹”，它只是把问题从「调用太密」转成「逻辑是否仍正确」——比如搜索框防抖后没做 loading 状态同步，用户会以为卡了；滚动节流后没更新 scrollTop 值，加载更多就永远不触发。效果好不好，不在函数本身，而在你有没有补全上下文逻辑。
