企业官网建设流程全解析

在前端开发中，防抖（Debounce）和节流（Throttle）是两种用于优化高频率触发事件（如滚动、窗口缩放、键盘输入）的技术。它们的核心目的都是为了减少函数执行次数，从而提高页面性能，避免浏览器卡顿。

1. 防抖 (Debounce)

概念：在事件被触发 n 秒后再执行回调。如果在这 n 秒内事件又被触发，则重新计时。

• 形象比喻：就像电脑休眠。如果你一直在动鼠标，电脑就不会休眠；只有当你停止操作一段时间后，电脑才会进入休眠状态。
• 应用场景：
• 搜索框输入查询：只有当用户停止打字一段时间后，才发送 API 请求。
• 窗口大小调整（resize）：窗口调整停止后，再重新计算布局。

2. 节流 (Throttle)

概念：规定在一个单位时间内，只能触发一次函数。如果在这个单位时间内触发了多次事件，只有**第一次（或最后一次）**生效。

• 形象比喻：就像技能冷却（CD）。当你放了一个大招后，无论你狂按多少次按键，在冷却时间结束前，技能都不会再次释放。
• 应用场景：
• 滚动监听（scroll）：比如加载更多或计算瀑布流位置，不需要每滚动 1px 就计算一次，而是每隔 200ms 计算一次。
• 抢购按钮点击：防止用户快速连续点击导致发送过多请求。

3. 直观对比总结

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;}};}