一、理解 `setTimeout` 与 `setInterval` 的基本机制
`setTimeout` 和 `setInterval` 是 JavaScript 中实现异步操作的基础方法。
`setTimeout(fn, delay)`：在指定的毫秒数后执行一次函数。`setInterval(fn, interval)`：每隔指定的毫秒数重复执行函数。
它们都返回一个唯一的定时器 ID，用于后续清除操作。
const timeoutId = setTimeout(() => {
console.log('This runs once');
}, 1000);
const intervalId = setInterval(() => {
console.log('This runs every second');
}, 1000);
二、为何清除定时器如此重要
未正确清除定时器可能导致以下问题：
内存泄漏：定时器回调引用了外部变量，导致无法被垃圾回收。逻辑错误：组件卸载后仍执行回调，可能访问已不存在的 DOM 或状态。重复执行：多个定时器叠加，造成不可预期的行为。
尤其在现代前端框架（如 React、Vue）中，组件卸载时必须清除所有副作用。
三、正确清除定时器的实践方法
关键在于：保存定时器 ID，并在合适的时机调用 `clearTimeout` 或 `clearInterval`。
let timer = null;
function startTimer() {
if (timer) {
clearTimeout(timer); // 避免重复启动
}
timer = setTimeout(() => {
console.log('Timer done');
}, 2000);
}
function stopTimer() {
if (timer) {
clearTimeout(timer);
timer = null; // 清空引用
}
}
对于 `setInterval`，也应遵循相同模式：
let interval = null;
function startInterval() {
if (interval) {
clearInterval(interval);
}
interval = setInterval(() => {
console.log('Interval running');
}, 1000);
}
function stopInterval() {
if (interval) {
clearInterval(interval);
interval = null;
}
}
四、组件卸载时的定时器清理策略
在 React 函数组件中，使用 `useEffect` 进行副作用管理：
useEffect(() => {
const timer = setTimeout(() => {
console.log('Timeout in React');
}, 3000);
return () => {
clearTimeout(timer);
};
}, []);
在 Vue 中，可在 `beforeUnmount` 生命周期钩子中清理：
export default {
mounted() {
this.timer = setTimeout(() => {
console.log('Vue timeout');
}, 3000);
},
beforeUnmount() {
clearTimeout(this.timer);
}
};
五、定时器管理的进阶技巧与最佳实践
以下是更复杂的场景处理建议：
场景建议做法组件多次挂载/卸载在每次挂载时先清除旧定时器，再创建新定时器。多个定时器共存使用数组或 Map 保存多个定时器 ID，便于统一管理。异步操作嵌套定时器确保在异步操作完成前取消旧定时器，防止竞态条件。
六、定时器生命周期管理的流程图
graph TD
A[开始定时任务] --> B{是否已有定时器?}
B -->|是| C[清除旧定时器]
B -->|否| D[创建新定时器]
C --> D
D --> E{组件是否卸载?}
E -->|是| F[清除定时器]
E -->|否| G[等待执行]
G --> H[执行回调]