多实例组件中防抖状态必须隔离，即每个实例需拥有独立定时器引用；正确做法是组件内调用debounce生成新函数，避免模块级复用，函数组件用useRef+useCallback，类组件在constructor中绑定，并在卸载时清理定时器。
多实例组件中防抖状态必须隔离，否则一个实例的触发会干扰另一个实例的计时逻辑——核心是让每个组件拥有自己的定时器引用，不共享闭包变量。
每个实例绑定独立的防抖函数
不能把防抖函数定义在组件外部或公共作用域里，否则所有实例共用同一个 timer 变量。正确做法是在组件初始化时，为每个实例单独生成防抖函数：
- 使用类组件：在 constructor 或 componentDidMount 中调用 debounce，返回的函数绑定到当前实例的属性上
- 使用函数组件 + useRef：为每个组件实例创建独立的 timerId 引用，避免闭包捕获旧值
- 示例（函数组件）：
const timerRef = useRef(null);
const debouncedHandler = useCallback((...args) => {
if (timerRef.current) clearTimeout(timerRef.current);
timerRef.current = setTimeout(() => {
handler(...args);
timerRef.current = null;
}, delay);
}, [handler, delay]);
避免使用全局或模块级防抖函数
像 const searchDebounce = debounce(apiSearch, 300) 这种写法一旦写在模块顶层，所有组件实例都会复用它内部的同一个 timer，导致后触发的实例覆盖前一个的计时器。应确保每次调用 debounce 都生成新函数：
- ✅ 正确：每个组件内调用 debounce(handler, delay)，各自持有独立闭包
- ❌ 错误：模块导出一个已封装好的 debouncedFn，多个组件直接 import 使用
- 若用 Lodash，也应按需调用 _.debounce(fn, ms)，而非复用同一返回值
结合 key 或实例标识做进一步隔离（进阶）
当组件可能被动态挂载/卸载（如列表中每个 item 是一个搜索框），还需在销毁时清理定时器，防止内存泄漏或执行过期回调：
立即学习“Java免费学习笔记（深入）”；
- 函数组件中，在 useEffect 清理函数里清除 timerRef.current
- 若组件有唯一 id（如来自 props），可将 timer 存入 Map，以 id 为键管理：
const timers = useRef(new Map());
// 触发时：timers.current.set(id, setTimeout(...))
// 卸载时：timers.current.get(id) && clearTimeout(timers.current.get(id))
Vue 或 React 第三方库中的处理惯例
现代框架生态已有成熟方案适配多实例场景：
- Vue 3 的 @vueuse/core 提供 useDebounceFn，内部自动基于当前组件实例生命周期管理 timer
- React 中 use-debounce 库的 useDebounceCallback 默认为每个调用生成独立防抖函数，并自动清理
- 自定义 Hook 若未声明依赖数组或未使用 useRef，容易误共享状态；务必检查其源码是否对每个调用新建闭包
