防抖插件使用

TONY · 发表于 2026-5-11 04:56

问题表现
明明配置了防抖，但函数仍被频繁触发，或者最后一次操作后没有按预期执行，导致页面卡顿、请求重复发送，甚至在控制台看到“debounce is not a function”之类的报错。
可能原因

对应排查步骤

最终解决方案

确保单例防抖：将防抖函数用
1. useRef
复制代码
（React）或
1. ref
复制代码
（Vue）保存，不随渲染重新生成。
明确调用时机：使用
1. lodash.debounce
复制代码
时，设置
1. { leading: false, trailing: true }
复制代码
获得常规“最后一次执行”效果；如果需要**立即执行，改为
1. { leading: true, trailing: false }
复制代码
。
绑定生命周期：在组件卸载时
1. cancel()
复制代码
防抖实例，避免内存泄漏和旧任务执行。
版本兼容：检查
1. lodash
复制代码
或
1. underscore
复制代码
版本是否过旧（<=4.17.20 存在已知 issue），升级到**并重启项目。
调试辅助：临时在防抖函数**行加
1. console.log('debounced', Date.now())
复制代码
，观察触发频率和实际执行时刻是否与预期一致。

搞定以上几点，防抖插件就能安心为你工作啦！如果还不行，欢迎带着代码片段和框架版本继续追问～