防抖是“等用户彻底停手再执行一次”，通过每次触发重置定时器实现，核心是 clearTimeout 清旧定时器、setTimeout 延迟执行，需保存 timeoutId 引用并透传 this 和参数。
防抖不是“让函数少执行几次”，而是“等用户彻底停手了再执行一次”——它解决的是高频触发场景下资源浪费和逻辑错乱的问题，比如搜索框输入、窗口缩放、按钮连点。
防抖的核心逻辑：每次触发都重置倒计时
关键在于用 setTimeout 延迟执行，并在下一次触发前用 clearTimeout 清掉旧的定时器。只要触发没停，定时器就永远等不到执行那一刻。
- 必须保存上一个
timeoutId的引用，否则无法清除 - 延迟时间（如 300ms）不是固定值，要根据场景调：输入搜索通常 200–500ms，窗口 resize 可设 100ms
- 函数执行时机取决于“最后一次触发之后是否过了等待时间”，和触发总次数无关
基础实现：带 this 和参数传递的防抖函数
原生 setTimeout 会丢失 this 和参数，所以要用 apply 或箭头函数绑定上下文，并把参数透传过去。
function debounce(func, wait) {
let timeoutId = null;
return function(...args) {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
func.apply(this, args);
}, wait);
};
}
- 使用
...args和func.apply(this, args)确保被包装函数能拿到正确的this和所有参数 - 不能直接写
setTimeout(func, wait, ...args)，因为这样会丢失this - 如果 func 是箭头函数，
this绑定无效，但多数业务函数是普通函数，需保留兼容性
加个 immediate 参数：首次立即执行，后续仍防抖
有些场景（如滚动到底部加载）希望第一次动作立刻响应，之后再进入防抖节奏。这时需要区分两种模式：
立即学习“Java免费学习笔记（深入）”；
-
immediate === true：首次调用立即执行，后续触发在 wait 时间内不执行，wait 结束后才恢复可执行状态 - 实现上需用一个标志位记录是否已执行，且只在
timeoutId === null时才允许立即执行 - 注意：这种模式下，
clearTimeout依然必要，否则连续触发会导致多次立即执行
实际使用中容易忽略的坑
防抖函数本身返回的是新函数，每次调用 debounce(fn, 300) 都会产生一个独立闭包，所以不能在组件重复渲染中反复创建，否则防抖失效。
- React 中应在
useCallback里定义并缓存防抖函数，或在模块顶层/类属性中初始化 - Vue 3 的
setup中同理，避免在render或响应式回调里重新生成 - 不要对防抖函数做
===比较判断，它的引用每次都不一样 - 如果函数内部有异步操作（如
fetch），防抖只控制发起时机，不控制请求并发或取消——那是AbortController的事
真正难的不是写对那几行代码，而是想清楚「这次操作到底该立刻响应，还是该攒一攒」；防抖的边界感，比实现细节更常出问题。
