防抖（Debounce）和节流（Throttle）是 JavaScript 中用于控制函数执行频率的两种经典策略，核心区别在于：防抖是“等你停手再执行”，节流是“固定节奏执行”。它们不是为了优化代码性能本身，而是为了解决高频事件（如 resize、scroll、input、mousemove）触发导致的过度计算、重复请求或 UI 卡顿问题。
防抖：最后一次触发后延迟执行
防抖函数会重置定时器，只在事件停止触发一段时间后，才真正执行一次回调。中间所有触发都会被忽略。
典型写法：每次触发时 clearTimeout 原定时器，再 setTimeout 新任务
适用场景：
● 搜索框输入联想：用户每打一个字都发请求？没必要。等他停顿 300ms 再查，既省请求又准
● 窗口大小调整后的布局重排：resize 一秒可能触发几十次，防抖后等用户调完再更新响应式结构
● 表单校验（如邮箱格式）：不等用户输完就报错，体验差；等输入暂停再提示更友好
节流：固定时间间隔内最多执行一次
节流保证函数在指定时间窗口内，无论触发多少次，只执行第一次（或最后一次），之后需等待冷却期结束才能再次执行。
常见实现方式有时间戳法（记录上次执行时间）或定时器法（用 flag 控制开关）
适用场景：
● 滚动加载（无限下拉）：用户快速滚动时，不需要每次 scroll 都检查是否到底部，每 200ms 判断一次就够了
● 鼠标移动轨迹采集：比如画板应用中记录 mousemove 位置，全量采集太密集，节流到 60fps（约 16ms）更合理
● 防止按钮重复提交：点击后禁用按钮是常见做法，但加个节流可多一层保险——即便绕过 UI 禁用，短时间内也无法重复触发提交逻辑
怎么选？看行为意图
关键判断点在于：你关心的是“用户最终想做什么”，还是“需要持续反馈”。
如果操作具有终结性（比如输入完成、拖拽结束、调整完毕），选防抖
如果操作具有持续性（比如滚动、拖动、实时定位），且需要稳定节奏反馈，选节流
注意：两者都应配合 cancelable（可取消）设计，比如组件卸载时清除定时器，避免内存泄漏或报错
小提醒：别滥用，也别手写“轮子”
Lodash 提供了成熟的 _.debounce 和 _.throttle，支持 leading/trailing、maxWait 等配置；现代框架如 React 中，也可结合 useRef + useEffect 封装自定义 Hook，比每次从零写更安全可靠。
标签： javascript
还木有评论哦，快来抢沙发吧~