前端防抖 作者：马育民 • 2026-07-19 18:49 • 阅读：10000 # 介绍 触发事件后，**延迟一段时间再执行函数**；如果这段时间内再次触发事件，则**重置延迟计时**，只有等待时间内不再触发，函数才真正执行。 一句话总结：**频繁触发只执行最后一次**。 ### 适用场景（高频短时间重复触发的事件） 1. **搜索框输入联想**（如：百度搜索，输入文字频繁发请求，等用户停手再查询） 2. 窗口 resize 窗口大小调整（拖动窗口不频繁重绘，松手后再计算布局） 3. 滚动 scroll 监听滚动位置 4. 鼠标移动 mousemove、鼠标移入移出 5. 按钮重复点击防止多次提交表单 # 防抖两种实现模式 ### 1. 延迟执行（最常用，输入框搜索） 触发事件 → 等待N毫秒执行；中途再次触发，重新倒计时。 例：输入文字，停止输入500ms后才请求接口。 ### 2. 立即执行（首次立刻执行，后续等待冷却） 第一次触发直接执行函数，之后N毫秒内再次触发都不执行，冷却结束才能再次触发。 例：按钮防止连续多次提交，点第一次立刻提交，短时间重复点击无效。 # 防抖 vs 节流 容易混淆，对比区分 | 特性 | 防抖 Debounce | 节流 Throttle | |------|---------------|---------------| | 执行规则 | 多次触发，**只执行最后一次** | 固定时间内**最多执行一次** | | 比喻 | 公交车等人，人不断上车就不开，没人上车才发车 | 公交车固定10分钟一班，错过就等下一班 | | 典型场景 | 搜索输入、窗口缩放 | 滚动监听、拖拽、鼠标移动 | # 总结 1. 防抖核心逻辑：**频繁触发清除旧定时器，新建延时任务，停止触发后延迟执行**； 2. 两种模式：延迟执行（搜索）、立即执行（按钮防重复点击）； 3. 解决高频事件重复执行、多余接口请求、页面频繁重绘卡顿问题； 4. 项目优先使用lodash.debounce，手写防抖注意闭包、this、销毁清除定时器。 原文出处：http://malaoshi.top/show_1GW3hpT6tler.html