Angular离开组件后setInterval定时器未销毁仍持续执行问题

setInterval是浏览器全局挂载的Web API，不属于Angular框架生命周期托管的资源。在Admin组件中初始化定时器后，定时器ID会被注册到全局事件循环中，Angular在路由切换、组件销毁时不会自动清理这类全局API创建的异步任务。
当登出离开Admin组件后，组件实例虽然被销毁，但定时器的回调仍然持有组件内service、http对象的引用，会持续按间隔触发接口请求，不仅会产生无效的网络开销，长期运行还会导致内存泄漏。

相关问题代码如下：

setInterval(() => {
   this.service.checkNew();
}, 300);

// 消息检查逻辑
checkNew() {
  this.http.get(this.basic.url + 'checknew/').subscribe((res) => {
    if (res['data'].length) {
      let sound = new Audio();
      sound.src = this.basic.static += 'sounds/alert.wav';
      sound.play();
      for (let item of res['data']) {
        if (this.contacts.length) {
          this.getItem('contacts/' + item.id + '/').then((message) => {
            this.contacts.unshift(<any>message);
          });
        }
        this.messages += 1;
        this.basic.fireAlert(item['name'] + ' Send message', 4);
      }
    }
  });
}

控制台网络面板的请求情况可参考截图：

• 存储定时器ID，在组件销毁生命周期中主动清除
  先在组件类中定义变量存储定时器返回的ID，初始化定时器时给变量赋值，随后实现OnDestroy生命周期接口，在组件销毁触发时调用clearInterval清除定时器：

  import { Component, OnDestroy } from '@angular/core';
  
  export class AdminComponent implements OnDestroy {
    // 存储定时器ID
    private messageCheckTimer: number | null = null;
  
    ngOnInit(): void {
      // 初始化定时器时保存ID
      this.messageCheckTimer = window.setInterval(() => {
        this.service.checkNew();
      }, 300);
    }
  
    ngOnDestroy(): void {
      // 组件销毁时清除定时器
      if (this.messageCheckTimer) {
        clearInterval(this.messageCheckTimer);
        this.messageCheckTimer = null;
      }
    }
  }
  

• 补全HTTP订阅的取消逻辑，避免内存泄漏
  现有代码中HTTP请求的订阅没有手动取消逻辑，如果组件销毁时请求仍在pending状态，请求返回后依然会执行回调操作已销毁组件的属性，建议结合RxJS的takeUntil操作符统一管理订阅销毁：

  import { Subject } from 'rxjs';
  import { takeUntil } from 'rxjs/operators';
  
  export class AdminComponent implements OnDestroy {
    private messageCheckTimer: number | null = null;
    // 用于通知所有订阅取消的信号
    private destroy$ = new Subject<void>();
  
    checkNew() {
      this.http.get(this.basic.url + 'checknew/')
        .pipe(takeUntil(this.destroy$))
        .subscribe((res) => {
          // 原有业务逻辑保持不变
          if (res['data'].length) {
            let sound = new Audio();
            sound.src = this.basic.static += 'sounds/alert.wav';
            sound.play();
            for (let item of res['data']) {
              if (this.contacts.length) {
                this.getItem('contacts/' + item.id + '/').then((message) => {
                  this.contacts.unshift(<any>message);
                });
              }
              this.messages += 1;
              this.basic.fireAlert(item['name'] + ' Send message', 4);
            }
          }
        });
    }
  
    ngOnDestroy(): void {
      if (this.messageCheckTimer) {
        clearInterval(this.messageCheckTimer);
        this.messageCheckTimer = null;
      }
      // 发送销毁信号，完成所有订阅的取消
      this.destroy$.next();
      this.destroy$.complete();
    }
  }
  

• 登出逻辑增加兜底处理
  在全局登出方法中，除了清除登录凭证、跳转登录页之外，可以额外增加全局事件通知，提前终止所有页面的轮询任务，避免登出后还携带失效凭证发起接口请求。

内容的提问来源于stack exchange，提问作者Abdulaziz aziz