定时器泄漏的典型表现是页面卡顿、内存占用持续上涨，尤其是反复进入退出同一模块后DevTools的Memory面板显示JS堆大小不回落；控制台里还能调用到本该被销毁组件里的setTimeout或setInterval回调函数——说明定时器没被清除，闭包还持有着组件实例。
定时器泄漏的典型表现是什么
页面卡顿、内存占用持续上涨，尤其是反复进入退出同一模块后 DevTools 的 Memory 面板显示 JS 堆大小不回落；控制台里还能调用到本该被销毁组件里的 setTimeout 或 setInterval 回调函数——说明定时器没被清除，闭包还持有着组件实例。
常见场景包括：React/Vue 组件挂载时启用了 setInterval，但卸载/销毁时漏掉 clearInterval；或在事件回调里嵌套了 setTimeout，却没保存其返回的 timer ID，导致无法清理。
关键判断依据：在组件销毁后，执行 debugger 或打个断点，再手动运行 console.log(window.performance.memory)，如果多次操作后堆内存稳定增长，且能查到残留的定时器 ID（比如用 console.dir(window) 搜索 __timer 类字段），基本就是泄漏了。
怎么定位没被清除的定时器
Chrome DevTools 的 Memory 面板配合 Heap Snapshot 是最直接的方式：
立即学习“前端免费学习笔记（深入）”；
- 打开 DevTools → Memory → 选中 “Heap snapshot” → 点击 “Take heap snapshot”
- 在 snapshot 中搜索关键词：
Timeout、Interval、setInterval、setTimeout - 展开匹配项，看 retaining path 是否指向某个已卸载的 React 组件实例、Vue 实例或 DOM 节点
更轻量的方法是加一层“定时器代理”用于追踪：
const timers = new Set();
const originalSetTimeout = setTimeout;
const originalSetInterval = setInterval;
<p>window.setTimeout = function(...args) {
const id = originalSetTimeout(...args);
timers.add(id);
return id;
};
window.clearTimeout = function(id) {
timers.delete(id);
return clearTimeout(id);
};
// 同理包装 setInterval / clearInterval</p>之后在控制台输入 timers.size 就能实时看到未清理的定时器数量；配合组件生命周期打日志（比如 Vue 的 beforeUnmount、React 的 useEffect cleanup），就能快速对上哪块代码漏了清理。
React 里 useEffect 清理定时器的正确写法
很多人以为只要写了 clearTimeout 就安全了，其实容易踩三个坑：闭包捕获旧 state、依赖数组遗漏、清理函数执行时机不对。
- 必须把 timer ID 存在 ref 里，避免闭包捕获过期的变量值
- 依赖数组不能漏掉影响定时器逻辑的 props 或 state，否则 effect 可能不重跑，导致新 timer 启动但旧 timer 还活着
- 清理函数必须返回，并且要确保它真的执行到了——比如在异步请求还没结束时组件就卸载了，得在 cleanup 里一并 abort
useEffect(() => {
const timerRef = useRef();
<p>const startTimer = () => {
timerRef.current = setTimeout(() => {
console.log('tick', count);
startTimer(); // 如果是递归定时，注意别无限累积
}, 1000);
};</p><p>startTimer();</p><p>return () => {
if (timerRef.current) {
clearTimeout(timerRef.current);
}
};
}, [count]); // 注意：count 变化时会先清旧 timer，再启新 timer</p>Vue 3 setup 中如何安全使用 setInterval
Vue 3 的 onBeforeUnmount 是清理入口，但要注意：不能在 setup 顶层直接调用 setInterval，否则无法绑定到当前组件实例的销毁钩子；也不能把 timer ID 存在响应式数据里（会触发不必要的更新）。
推荐做法是：
- 用
ref存储 timer ID（非响应式，仅作容器） - 在
onMounted或某个事件中启动定时器 - 在
onBeforeUnmount中统一清理 - 如果定时器逻辑依赖响应式数据，记得在回调里用
unref或toValue安全读取，避免建立意外响应依赖
import { ref, onMounted, onBeforeUnmount } from 'vue';
<p>export default {
setup() {
const intervalRef = ref(null);</p><pre class='brush:php;toolbar:false;'>const start = () => {
intervalRef.value = setInterval(() => {
console.log('running...');
}, 2000);
};
onMounted(() => {
start();
});
onBeforeUnmount(() => {
if (intervalRef.value) {
clearInterval(intervalRef.value);
intervalRef.value = null;
}
});
return {};} };
真正麻烦的不是写清除逻辑，而是那些藏在第三方库回调里、或被 Promise.then 链裹着的定时器——它们往往没有显式暴露 timer ID。这种时候得靠代理 + 快照交叉验证，而不是盲目相信“我写了 clear 就没问题”。
