节流和防抖是控制函数执行频率的两种策略：节流确保单位时间内最多执行一次，适合需周期性响应的场景；防抖只在最后一次触发后延迟执行，适合只需终态响应的操作。
节流（Throttle）和防抖（Debounce）是 JavaScript 中用于控制函数执行频率的两种常用策略，核心目标是减少高频事件（如 scroll、resize、input、mousemove）触发的函数调用次数，从而避免性能瓶颈、卡顿或不必要的计算。
节流：固定频率执行
节流确保函数在指定时间间隔内最多执行一次。比如设置 200ms 节流，无论事件触发多少次，函数每 200ms 最多运行一次——像“匀速滴水”，节奏稳定。
适用场景：需要持续响应但不必每次都处理，例如滚动监听中更新吸顶状态、实时计算可视区域元素。
- 实现方式通常用时间戳或定时器判断是否到达间隔；
- 常见有两种风格：首次立即执行（leading），或等待间隔后执行（trailing）；
- 注意避免因重置定时器不及时导致漏掉最后一次调用（推荐使用时间戳法更可靠）。
防抖：只响应最后一次
防抖会把多次连续触发合并为一次，在最后一次触发后等待指定延迟才执行函数。如果期间再次触发，则重新计时——像“等用户打完字再搜索”，中间敲击都不算数。
立即学习“Java免费学习笔记（深入）”；
适用场景：搜索框输入联想、窗口尺寸最终调整完成后的布局重排、表单提交前验证。
- 典型实现依赖
setTimeout+clearTimeout； - 可选是否在首次触发时立即执行（immediate 模式），但多数情况用默认 trailing 更安全；
- 务必在组件卸载或事件解绑前清除定时器，防止内存泄漏或报错。
关键区别与选择依据
节流强调“单位时间内的上限”，适合需要周期性反馈的场景；防抖强调“稳定后的最终结果”，适合只需终态响应的操作。
- 用户拖拽调整窗口大小 → 节流更合适（需持续适配）；
- 搜索框输入关键词 → 防抖更合适（避免每次按键都请求接口）；
- 鼠标移动轨迹记录 → 节流可降低采样密度；
- 按钮防重复点击 → 防抖（配合禁用按钮更稳妥）。
现代实践建议
不必每次都手写，可借助 Lodash 的 _.throttle 和 _.debounce，或使用轻量工具库（如 use-throttle、use-debounce 在 React 中）。若需自定义，优先采用时间戳节流 + 定时器防抖的经典组合，逻辑清晰且兼容性好。
实际优化效果明显：一个频繁触发的 scroll 事件原本每秒调用 60 次函数，节流到 200ms 后降至约 5 次，防抖则可能整段滚动只执行 1–2 次——资源消耗大幅下降，用户体验更顺滑。
