防抖和节流
在前端开发中，防抖（Debounce）和节流（Throttle）是两种用于优化高频率触发事件（如滚动、窗口缩放、键盘输入）的技术。它们的核心目的都是为了减少函数执行次数，从而提高页面性能，避免浏览器卡顿。
1. 防抖 (Debounce)
概念：在事件被触发 n 秒后再执行回调。如果在这 n 秒内事件又被触发，则重新计时。
- 形象比喻：就像电脑休眠。如果你一直在动鼠标，电脑就不会休眠；只有当你停止操作一段时间后，电脑才会进入休眠状态。
- 应用场景：
- 搜索框输入查询：只有当用户停止打字一段时间后，才发送 API 请求。
- 窗口大小调整（resize）：窗口调整停止后，再重新计算布局。
2. 节流 (Throttle)
概念：规定在一个单位时间内，只能触发一次函数。如果在这个单位时间内触发了多次事件，只有**第一次（或最后一次）**生效。
- 形象比喻：就像技能冷却（CD）。当你放了一个大招后，无论你狂按多少次按键，在冷却时间结束前，技能都不会再次释放。
- 应用场景：
- 滚动监听（scroll）：比如加载更多或计算瀑布流位置，不需要每滚动 1px 就计算一次，而是每隔 200ms 计算一次。
- 抢购按钮点击：防止用户快速连续点击导致发送过多请求。
3. 直观对比总结
| 特性 | 防抖 (Debounce) | 节流 (Throttle) |
|---|---|---|
| 核心思想 | 只要你一直触发，我就一直不执行。只看最后一次。 | 无论你触发多快，我都按固定频率执行。细水长流。 |
| 触发点 | 事件停止触发一段时间后执行。 | 事件触发期间，每隔一段时间执行一次。 |
| 主要目的 | 减少由于连续触发带来的不必要执行。 | 均匀分布执行过滤，控制流量。 |
4. 简易代码实现 (JavaScript)
防抖函数
functiondebounce(fn,delay){lettimer=null;returnfunction(...args){if(timer)clearTimeout(timer);// 如果有计时器，直接清除并重新开始timer=setTimeout(()=>{fn.apply(this,args);},delay);};}节流函数 (时间戳版)
functionthrottle(fn,delay){letlastTime=0;returnfunction(...args){letnow=Date.now();if(now-lastTime>delay){// 只有当前时间与上次执行时间间隔大于 delay 才执行fn.apply(this,args);lastTime=now;}};}