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