防抖与节流

概念区别

防抖：每次触发时重置计时器，只有连续触发停止后经过 N 毫秒才执行。场景：搜索框输入联想——用户还在打字时不发请求，停下来 300ms 后再发。节流：无论触发多频繁，固定每 N 毫秒最多执行一次。场景：页面滚动时更新吸顶状态——不需要每次 scroll 都算，60fps 的节流够用。两者可以用时间戳或 setTimeout 实现，Lodash 的 _.debounce 和 _.throttle 支持 leading/trailing 配置，控制首次触发时是否立即执行。[1]

React/Vue 中的注意事项

在函数组件中直接写 const handleInput = debounce(fn, 300) 会在每次渲染时重建防抖函数，导致计时器永远被重置、防抖失效。正确做法是用 useCallback（React）或 ref（Vue）缓存防抖函数引用。组件卸载时需要取消挂起的定时器（debounced.cancel()），否则可能在已卸载组件上调用 setState，引发内存泄漏警告。这个细节是实战中的高频 bug 来源。