防抖和节流是解决高频触发的两种不同策略：防抖适用于用户停止后执行（如搜索输入），节流适用于固定频率执行（如滚动监听）；需注意this绑定、参数传递、cancel清理及SSR兼容性。
防抖和节流不是“选一个用就行”的功能，而是解决不同场景下高频触发问题的两种策略：防抖适用于「等用户停下来再执行」（比如搜索框输入、窗口 resize 后校准布局），节流适用于「固定频率执行」（比如鼠标持续拖拽、滚动监听上报）。直接套代码容易出错，关键得看清楚触发时机和 this、参数、取消逻辑怎么处理。
防抖函数必须手动 cancel 才能真正可控
很多实现只返回一个包装函数，没暴露 cancel 方法，导致无法主动清空待执行任务。比如表单输入中用户切到别的 tab，你得在组件卸载时取消 pending 的请求，否则可能触发 setState on unmounted component 错误。
实操建议：
- 用闭包保存定时器 ID，每次调用先
clearTimeout再setTimeout - 返回的函数对象上挂载
cancel方法，内部执行clearTimeout并重置 ID 为null - 注意
this绑定 —— 不要用箭头函数包裹主体逻辑，否则丢失原始上下文；推荐用func.apply(this, args) - 如果需要首次立即执行（leading edge），得单独判断定时器是否为
null，且不能和 trailing 混用
节流要分清楚「时间戳版」和「定时器版」的适用差异
时间戳版节流（用 previous 记录上次执行时间）会在触发间隔大于阈值时立刻执行，但最后一次触发若未达间隔则被丢弃；定时器版（用 setTimeout + 状态锁）能保证最后一次也执行，但首次会有延迟。React 中监听 scroll 常用前者，而 Canvas 动画控制倾向后者。
立即学习“Java免费学习笔记（深入）”；
实操建议：
- 时间戳版：检查
now - previous >= delay，满足则执行并更新previous = now - 定时器版：用布尔变量
isPending控制，触发时若为false则执行并设为true，执行完再setTimeout清除状态 - 两者都需用
func.apply(this, args)保持上下文，不能简单写成func(...args)（会丢失 this） - 别把节流 delay 设成 0 —— 浏览器最小 timer 约 4ms，且 0 会退化成同步执行，失去节流意义
Vue/React 里直接用封装好的 hook 更安全
手写防抖节流在组件内容易忽略生命周期清理，比如 Vue 的 onUnmounted 或 React 的 useEffect cleanup。尤其防抖的 pending 定时器，不清理就会造成内存泄漏或状态错乱。
实操建议：
- Vue 3 推荐用
@vueuse/core的useDebounceFn和useThrottleFn，它们自动绑定onBeforeUnmount - React 可用
use-debounce（支持 promise 防抖）或自定义 hook，内部用useRef存定时器 ID，useEffect返回 cleanup 函数 - 避免在 render 中反复创建防抖函数（如
onClick={debounce(handleClick, 300)}），应提前定义或用useCallback缓存 - 服务端渲染（SSR）环境没有
setTimeout，需加typeof window !== 'undefined'判断
最常被忽略的是 this 和参数传递的完整性，以及 cleanup 的时机 —— 很多 bug 表现为「点了没反应」或「点了两次才触发」，其实只是上下文丢了或者定时器没清干净。
