防抖函数必须返回含cancel方法的对象并在组件卸载前调用，否则会导致内存泄漏或更新已销毁组件；React中在useEffect清理函数调用cancel，Vue中在beforeUnmount/onBeforeUnmount中调用。
在 React 或 Vue 等组件化框架中使用防抖函数时，若未在组件卸载前清除定时器，会导致 内存泄漏 或 setState/useEffect 更新已销毁组件 的错误（如 React 中的 “Can’t perform a React state update on an unmounted component”）。关键在于：防抖函数本身需支持手动清理，且组件生命周期中必须调用该清理方法。
防抖函数需返回清理函数
不能只返回一个“防抖后”的函数，而要返回一个对象，包含执行函数和清理函数（如 cancel），便于外部主动释放定时器。
- 内部使用
setTimeout保存引用（如let timerId = null） - 每次触发时先清除旧定时器，再设新定时器
- 暴露
cancel()方法，直接清除当前 timer
React 中在 useEffect 清理函数里调用 cancel
利用 useEffect 返回的清理函数，在组件卸载或依赖变化前执行防抖器的清理逻辑。
- 防抖函数在
useCallback中创建，避免重复生成 -
useEffect依赖项中包含该防抖函数时，需确保其稳定（否则可能漏清） - 更稳妥做法：在
useEffect内部创建防抖函数，或确保其引用不变
Vue 中在 beforeUnmount 或 onBeforeUnmount 里清理
Options API 使用 beforeUnmount，Composition API 使用 onBeforeUnmount，在其中调用防抖器的 cancel()。
立即学习“Java免费学习笔记（深入）”；
- 防抖实例应定义在
setup或 data 中，保证可被生命周期钩子访问 - 避免在
watch或事件回调中直接内联定义防抖函数（无法外部清理） - 推荐将防抖逻辑封装为可复用的 composable，自动绑定清理逻辑
防抖函数简易实现示例（含 cancel）
以下是一个轻量、可清理的防抖函数参考实现：
function debounce(fn, delay) {
let timerId = null;
const debounced = (...args) => {
clearTimeout(timerId);
timerId = setTimeout(() => fn(...args), delay);
};
debounced.cancel = () => {
if (timerId !== null) {
clearTimeout(timerId);
timerId = null;
}
};
return debounced;
}
使用时记得保存返回值，并在合适时机调用 .cancel() —— 这一步不可省略。
