不清理事件监听（页面跳转了还在跑 'setInterval'）

问题现象

页面跳转后，setInterval定时器仍在后台运行。这种情况经常出现在单页应用（SPA）或传统多页应用中，开发者忘记在组件卸载或页面跳转前清理定时器。控制台不断输出日志，甚至可能引发内存泄漏。

// 错误示例：未清理的定时器
function startTimer() {
  setInterval(() => {
    console.log('Timer is running...');
  }, 1000);
}

// 页面跳转后，定时器依然在后台运行

根本原因分析

定时器属于浏览器层面的异步任务，与页面生命周期无关。当调用setInterval时，浏览器会分配一个计时器ID并持续执行回调，除非：

1. 显式调用clearInterval
2. 整个浏览器窗口关闭
3. 执行环境被销毁（如iframe移除）

在React/Vue等框架中，组件卸载不会自动清除原生定时器。下面是一个典型的问题场景：

// React类组件示例
class Clock extends React.Component {
  componentDidMount() {
    this.timer = setInterval(() => {
      this.setState({ time: new Date() });
    }, 1000);
  }

  // 缺少componentWillUnmount清理
  render() {
    return <div>{this.state.time.toString()}</div>;
  }
}

解决方案

基础清理方法

最直接的解决方案是在离开页面前手动清除：

// 原生JS解决方案
let timerId;

function startTimer() {
  timerId = setInterval(doSomething, 1000);
}

// 页面卸载时清理
window.addEventListener('beforeunload', () => {
  clearInterval(timerId);
});

框架最佳实践

React解决方案

// 函数组件 + useEffect
function TimerComponent() {
  useEffect(() => {
    const timer = setInterval(() => {
      console.log('Tick');
    }, 1000);

    // 清理函数
    return () => clearInterval(timer);
  }, []);

  return <div>Timer Example</div>;
}

Vue解决方案

// Options API
export default {
  data() {
    return {
      timer: null
    }
  },
  mounted() {
    this.timer = setInterval(this.updateData, 1000);
  },
  beforeUnmount() {
    clearInterval(this.timer);
  },
  methods: {
    updateData() {
      // 数据更新逻辑
    }
  }
}

高级防御方案

对于可能被多次调用的场景，建议采用安全封装：

// 安全的定时器封装
class SafeTimer {
  constructor() {
    this.timers = new Set();
  }

  setInterval(callback, delay) {
    const timer = setInterval(callback, delay);
    this.timers.add(timer);
    return timer;
  }

  clearAll() {
    this.timers.forEach(timer => clearInterval(timer));
    this.timers.clear();
  }
}

// 使用示例
const timerManager = new SafeTimer();

// 设置定时器
timerManager.setInterval(() => {
  console.log('Safe timer');
}, 500);

// 页面卸载时清理所有
window.addEventListener('unload', () => {
  timerManager.clearAll();
});

实际案例分析

单页应用路由切换问题

在Vue Router中，即使路由变化，前一个组件的定时器可能仍在运行：

// Vue Router组件
{
  path: '/dashboard',
  component: Dashboard,
  beforeRouteLeave(to, from, next) {
    // 必须在此清理
    clearInterval(this.dataPollingTimer);
    next();
  }
}

第三方库集成问题

某些图表库（如ECharts）内部可能使用定时器，需要特殊处理：

// ECharts示例
useEffect(() => {
  const chart = echarts.init(domRef.current);
  chart.setOption({/*...*/});

  return () => {
    chart.dispose(); // 内部会清理定时器
  };
}, []);

调试与检测技巧

1. Chrome开发者工具检测：

   • 使用Memory面板拍摄堆快照
   • 过滤Timer对象查看存活定时器

2. 控制台检测方法：

   // 列出所有活跃定时器
   console.log('Active intervals:', 
     Array.from(document.querySelectorAll('script'))
       .map(scr => scr._intervalIds)
       .filter(Boolean)
   );
   

3. 性能影响监控：

   // 记录定时器执行情况
   const originalSetInterval = window.setInterval;
   window.setInterval = (callback, delay) => {
     console.trace(`Interval created with ${delay}ms delay`);
     return originalSetInterval(callback, delay);
   };
   

特殊场景处理

Web Worker中的定时器

Worker线程中的定时器需要单独清理：

// worker.js
let timer;

self.onmessage = (e) => {
  if (e.data === 'start') {
    timer = setInterval(() => {
      self.postMessage('tick');
    }, 1000);
  }
  if (e.data === 'stop') {
    clearInterval(timer);
  }
};

iframe场景处理

移除iframe前必须清理内部定时器：

const iframe = document.createElement('iframe');
document.body.appendChild(iframe);

// 移除前清理
iframe.contentWindow.clearInterval = function(id) {
  // 自定义清理逻辑
  originalClearInterval.call(this, id);
};

// 最终移除
iframe.parentNode.removeChild(iframe);

自动化预防方案

ESLint规则配置

添加自定义规则强制检查定时器清理：

// .eslintrc.js
module.exports = {
  rules: {
    'require-timer-cleanup': {
      create(context) {
        return {
          'CallExpression[callee.name="setInterval"]'(node) {
            if (!hasCleanup(node.parent)) {
              context.report({
                node,
                message: 'setInterval must have corresponding cleanup'
              });
            }
          }
        };
      }
    }
  }
};

TypeScript装饰器方案

function AutoCleanTimer() {
  return function(target: any, key: string, desc: PropertyDescriptor) {
    const original = desc.value;
    const timers: number[] = [];

    desc.value = function(...args: any[]) {
      const originalSetInterval = window.setInterval;
      
      window.setInterval = ((handler, timeout, ...args) => {
        const timer = originalSetInterval(handler, timeout, ...args);
        timers.push(timer);
        return timer;
      }) as any;

      const result = original.apply(this, args);
      
      window.setInterval = originalSetInterval;
      return {
        ...result,
        __timers: timers
      };
    };
  };
}

// 使用示例
class TimerService {
  @AutoCleanTimer()
  startPolling() {
    setInterval(() => {/*...*/}, 1000);
  }
}

性能影响深度分析

未清理定时器会导致：

1. CPU持续占用：即使页面不可见，回调仍在执行
2. 内存泄漏：定时器保持对DOM元素或大对象的引用
3. 电池消耗：移动设备上显著增加能耗

测试示例：

// 内存泄漏测试
function createLeak() {
  const bigData = new Array(1e6).fill({data: 'leak'});
  setInterval(() => {
    console.log(bigData.length); // 保持引用
  }, 1000);
}

// 调用后即使跳转页面，bigData也不会被GC回收