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