Angular组件显示时执行定时任务、隐藏即停止的正确方法

你当前写法存在两个必然导致异常的问题：

• 原生setInterval创建的定时器不会随组件隐藏、实例销毁自动回收，会一直驻留内存持续执行
• 组件每次重新初始化（*ngIf重新渲染、路由重新进入、Tab重新激活）都会新建一个定时器，旧定时器未被清理的情况下，就会出现任务双倍、多倍重复执行的问题

根据你控制组件显隐的逻辑，选择对应实现即可：

方案1：组件销毁时自动清理（适用于*ngIf渲染、路由跳转销毁组件的常规场景） #

不要把定时逻辑写在构造函数里，Angular构造函数仅适合做依赖注入，所有初始化逻辑放到ngOnInit生命周期钩子里执行。
需要提前保存setInterval返回的定时器ID，在组件销毁的ngOnDestroy钩子中主动清除定时器：

import { Component, OnInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-demo',
  template: ``
})
export class DemoComponent implements OnInit, OnDestroy {
  private timerId: number | null = null;
  // 自定义定时间隔，单位秒
  private readonly intervalSeconds = 5;

  ngOnInit(): void {
    this.startIntervalTask();
  }

  ngOnDestroy(): void {
    this.stopIntervalTask();
  }

  private startIntervalTask(): void {
    // 启动前先清理残留的旧定时器，*从根源避免重复执行*
    this.stopIntervalTask();
    this.timerId = window.setInterval(() => {
      // 写入需要定期执行的业务逻辑
    }, this.intervalSeconds * 1000);
  }

  private stopIntervalTask(): void {
    if (this.timerId) {
      clearInterval(this.timerId);
      this.timerId = null;
    }
  }
}

方案2：组件显隐状态变化时启停任务（适用于组件实例不销毁、仅CSS隐藏的场景） #

如果你的组件是通过display: none、路由复用缓存、Tab切换等方式隐藏，隐藏时不会触发组件销毁生命周期，需要额外监听显隐状态控制定时器启停：

import { Component, OnInit, OnDestroy, HostListener, Input, SimpleChanges, OnChanges } from '@angular/core';

@Component({
  selector: 'app-demo',
  template: ``
})
export class DemoComponent implements OnInit, OnDestroy, OnChanges {
  private timerId: number | null = null;
  private readonly intervalSeconds = 5;
  // 如果是父组件传值控制显隐就加这个输入属性
  @Input() isVisible = false;

  ngOnInit(): void {
    if (this.checkVisible()) {
      this.startIntervalTask();
    }
  }

  ngOnDestroy(): void {
    this.stopIntervalTask();
  }

  // 监听浏览器标签页切换、窗口最小化导致的页面隐藏
  @HostListener('document:visibilitychange')
  onPageVisibilityChange(): void {
    this.checkVisible() ? this.startIntervalTask() : this.stopIntervalTask();
  }

  // 监听父组件传入的显隐状态变化
  ngOnChanges(changes: SimpleChanges): void {
    if (changes['isVisible']) {
      this.isVisible ? this.startIntervalTask() : this.stopIntervalTask();
    }
  }

  private checkVisible(): boolean {
    // 结合自身业务调整可见性判断逻辑，比如同时判断页面可见+组件自身显隐状态
    return !document.hidden && this.isVisible;
  }

  private startIntervalTask(): void {
    this.stopIntervalTask();
    this.timerId = window.setInterval(() => {
      // 定期执行的业务逻辑
    }, this.intervalSeconds * 1000);
  }

  private stopIntervalTask(): void {
    if (this.timerId) {
      clearInterval(this.timerId);
      this.timerId = null;
    }
  }
}

如果项目里已经在使用RxJS，可以用interval操作符配合takeUntil自动完成清理，不用手动维护定时器ID：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { interval, Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

@Component({
  selector: 'app-demo',
  template: ``
})
export class DemoComponent implements OnInit, OnDestroy {
  private readonly destroy$ = new Subject<void>();
  private readonly intervalSeconds = 5;

  ngOnInit(): void {
    interval(this.intervalSeconds * 1000)
      .pipe(takeUntil(this.destroy$))
      .subscribe(() => {
        // 定期执行的业务逻辑
      });
  }

  ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

注意：如果是显隐控制的场景，只需要额外加显隐判断，在隐藏时触发终止通知、显示时重新订阅即可。

内容的提问来源于stack exchange，提问作者Gurkenkönig