选防抖还是节流取决于业务意图：需用户停止后执行用防抖（如搜索联想、表单防重），需过程中匀速响应用节流（如滚动懒加载、鼠标采样），复杂场景可组合使用并注意this绑定、参数透传和取消能力。
高频事件本身不是问题，关键在于你“关心的是什么时机”。选防抖还是节流，不看事件类型，而看业务意图——是等用户“停下来再动作”，还是在“过程中匀速响应”。
看场景：用户行为结束后才需要结果？用防抖
防抖适用于那些只有最终状态才有意义的操作。它把一连串密集触发“压缩”成一次执行，前提是中间没有新动作干扰。
- 搜索框联想：用户输入“react”，敲了 r-e-a-c-t 六次，你不需要发六次请求，只在他停顿（比如 300ms 内没再输）后查一次“react”
- 表单提交防重：用户狂点提交按钮，你只需让第一次点击后禁用按钮，或只让最后一次点击真正发起请求
- 窗口 resize 后重新布局：浏览器可能在几毫秒内触发十几次 resize，但你真正要做的只是等拖拽结束、尺寸稳定后再重绘一次
看节奏：过程中必须定期反馈？用节流
节流适用于那些需要持续感知、但不必全量响应的场景。它保证函数以固定间隔执行，哪怕事件还在狂轰滥炸。
- 滚动监听做懒加载：用户快速下滑，你不需要每滚一像素都判断是否到临界点，只要每 100ms 检查一次可视区域即可
- 鼠标移动轨迹采样：画板类应用记录 mousemove，全量采集会卡死，按 16ms（60fps）节流就能兼顾流畅与精度
- 实时位置上报：GPS 或定位更新频繁，后台只需每 5 秒接收一个坐标，而不是每毫秒都推
容易混淆的边界情况：试试“防抖+节流”组合
有些需求既不能全等、也不能匀速，需要分层控制。比如一个带搜索建议的输入框：
前端设计优化skill
下载
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
立即学习“前端免费学习笔记（深入）”；
- 用户刚输入第一个字，你希望立刻显示“热门搜索”（立即执行）
- 后续输入则进入防抖逻辑，避免频繁请求
- 同时限制 1 分钟最多请求 10 次，防止恶意刷接口（额外加节流兜底）
这时可用支持 immediate 参数的防抖函数，并在外层加请求频控，而不是强行套用单一策略。
别忽略的细节：this、参数、取消能力
手写或调用工具库时，注意三个实际开发中必踩的坑：
-
this 指向丢失：事件回调里的
this默认指向 DOM 元素，但 setTimeout 内部会丢失；需用fn.apply(context, args)显式绑定 -
参数传递不全：原生事件对象（如
event）需完整透传，不能只传event.target.value就完事 - 缺少 cancel 方法：组件卸载或条件变更时，应能手动清除定时器，避免内存泄漏或执行过期回调
