防抖与节流是保障前端事件监听可用性的关键防线：防抖适用于获取最终意图的场景（如搜索），节流适用于需持续可控反馈的场景（如滚动），二者均需配合监听器正确绑定与清理。

前端事件监听本身不“脆弱”，但高频触发时容易引发性能崩塌、状态错乱或接口滥发——防抖与节流不是锦上添花，而是保障基础可用性的关键防线。

防抖：专治“停不下来”的连续操作

适用于用户行为具有“阶段性收尾”特征的场景，比如输入搜索、窗口缩放、按钮重复点击。它的逻辑是：只要还在触发，就不断重置倒计时；只有真正停下来，才执行一次。

• 典型问题：搜索框每按一个键就发请求，用户输“hello”可能触发5次请求，后4次全浪费
• 防抖解法：设置300ms延迟，用户停止输入300ms后才调用搜索函数；中间任意一次新输入都会清掉旧定时器
• 健壮性提升点：避免无效网络请求、防止接口限流报错、减少服务端压力、杜绝因多次setState导致的渲染抖动

节流：守住“节奏底线”的稳定输出

适用于需要持续反馈但不能无节制执行的场景，比如滚动监听、鼠标移动追踪、实时位置上报。它的逻辑是：不管你怎么狂点狂滚，我只按固定节奏响应，比如每200ms最多执行一次。

前端设计优化skill

前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。

下载

• 典型问题：滚动事件每秒触发60+次，每次调用计算可视区域并setState，页面直接卡死
• 节流解法：用时间戳或定时器标记“上次已执行”，未到间隔则跳过；保证滚动中每200ms最多更新一次状态
• 健壮性提升点：防止主线程被密集回调阻塞、避免过度重绘回流、维持60fps滚动流畅度、降低内存占用波动

监听器绑定本身也要防“漏”和“重”

再好的防抖节流，如果事件监听器没管好，也会失效甚至拖垮应用。

立即学习“前端免费学习笔记（深入）”；

• 避免箭头函数直接传入addEventListener：每次渲染生成新函数，导致removeEventListener无法匹配清除，监听器越积越多
• 务必在组件卸载或依赖变更时清理：useEffect返回清理函数、Vue onUnmounted、原生 add/remove 成对出现
• 加空值校验再监听：document.querySelector('.scroll-box')可能为null，先判空再addEventListener，防止静默报错中断后续逻辑

选防抖还是节流？看事件是否需要“最终结果”

这不是性能参数选择题，而是交互语义判断题。

• 选防抖：你要的是“用户最终意图”，比如搜索词、表单校验、提交确认
• 选节流：你要的是“过程中的可控反馈”，比如滚动加载、画布拖拽、音量滑块实时响应
• 混合使用也常见：例如搜索框先防抖（等用户输完），但防抖前加节流式输入长度限制（每500ms最多校验一次格式）