防抖与节流为何对界面很重要

某些 DOM 事件的触发频率极高。keypress 事件会在每次按键时触发。用户滚动时，scroll 事件每秒会触发几十次。用户拖动窗口边框时，resize 事件会持续触发。逐一处理每个事件可能会让浏览器和服务器不堪重负。

如果按键处理函数在每次按键时都发起接口请求，用户输入“React 钩子”（11 个字符）会触发 11 次网络请求，其中大多数对应不完整的查询。同样，在每个滚动像素上更新视差动画，会使每秒重新渲染数百次。这会浪费 CPU、网络资源和电量。

防抖会延迟执行，直到事件停止触发一段指定时间。如果用户仍在输入，计时器会在每次按键时重置。只有在静默 N 毫秒后，处理函数才最终执行一次。防抖解决的是这样的问题：“用户完成某项操作后再执行此操作。”

节流会将执行频率限制为每个时间间隔最多一次，无论触发了多少个事件。如果用户快速滚动，100 毫秒的节流会确保处理函数每秒最多运行 10 次。节流解决的是这样的问题：“定期执行，但不要比每 N 毫秒一次更频繁。”

当您只关心用户停止操作后的最终值时，防抖是正确的选择。典型场景包括：搜索输入框（输入暂停后发送接口请求）、窗口大小调整处理函数（调整结束后重新计算布局），以及会检查服务器的表单字段验证（等待完整输入后再验证）。

当您希望在持续活动期间定期更新时，节流是正确的选择。典型场景包括：滚动位置处理函数（以最多 30 帧/秒的频率更新阅读进度条或固定标题）、鼠标移动跟踪（记录光标位置用于分析），以及拖动事件处理函数（平滑地更新可拖动元素的位置，同时避免事件过多）。

如果没有充分理解其机制就自行编写防抖或节流，可能会产生遗漏最后一个事件（后沿）、在错误的边沿触发，或未在组件卸载时清理计时器等问题。通常最好使用成熟库中的经过充分验证的实现，因为它们能够正确处理所有边界情况。

该库提供 _.debounce(fn, wait) 和 _.throttle(fn, wait)，并可通过选项控制首次触发和末次触发的行为。返回的函数具有 .cancel() 方法，可中止待处理的调用；还具有 .flush() 方法，可立即执行该调用。在 React 中，应将这些函数包装在 useRef 中，以避免重新渲染时重复创建。

即使未使用节流的滚动处理函数每秒额外造成 50 次重新渲染，也可能消耗大量 CPU，尤其是在低端移动设备上。16 毫秒的帧预算（60 帧/秒）意味着每次重新渲染都必须在 16 毫秒内完成，以避免丢帧。防抖和节流是解决帧率问题的第一道防线。

并非所有高频处理函数都需要防抖。如果事件处理函数只是读取值，而不更新状态或调用接口——例如，在引用中记录最后一次鼠标位置——就不需要防抖。只有会触发高成本操作的处理函数才需要防抖或节流，例如状态更新、接口调用或 DOM 测量。

组件卸载时，应取消任何待处理的防抖调用，以防止在卸载后更新状态。如果使用 useRef 存储防抖函数，请在 useEffect 的清理函数中调用 debouncedFn.cancel()。防抖函数提供此方法正是为了这一用途。

如果要在用户停止在搜索框中输入时触发接口调用，应使用哪种技术？

如果按键、滚动和调整大小等高频事件的处理函数在每次事件发生时都运行，就可能造成性能问题。防抖会等待静默期，最适合搜索输入和窗口大小调整处理函数。节流会限制触发频率，最适合滚动和拖动。请使用存储在引用中的成熟库实现，并始终在组件卸载时取消调用。