Angular页面切换后setInterval仍执行问题及修复咨询

这个问题我之前也碰到过，核心原因很明确：你只在ngOnDestroy里取消了HTTP请求的订阅，但没有清理掉setInterval创建的定时器。组件切换后，定时器还在后台运行，到时间就会继续调用getUsers()方法，自然会持续发起数据请求。

解决方案步骤 #

要彻底解决这个问题，你需要：

1. 保存setInterval返回的定时器ID
2. 在组件销毁时同时清理定时器和订阅

修改后的完整代码 #

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';
// 导入你需要的其他依赖，比如dataService、router、toastr等

@Component({
  // 组件元数据
})
export class YourComponent implements OnInit, OnDestroy {
  private intervalId: number; // 新增：保存定时器ID
  private sub: Subscription;

  // 你的其他组件属性，比如showClearBtn、customerList等

  ngOnInit() { 
    // 保存定时器ID
    this.intervalId = setInterval(() => { 
      if ( this.showClearBtn === true || this.showClrBtnStatus === true || this.showClrBtnDate === true ) { 
        console.log("do nothing"); 
      } else { 
        this.getUsers(); 
      } 
    }, 100000); 
  } 

  getUsers() { 
    this.sub = this.dataService.getUsers().subscribe( 
      data => { 
        console.log(data); 
        this.dataIsLoading = false; 
        this.loading = false; 
        switch (data["status"].resCode) { 
          case 10001: 
            console.log(data); 
            this.customerList = data["pendingLoanApprovalArray"]; 
            console.log(this.customerList); 
            this.customerList.forEach(element => { 
              console.log(element.applicationDate); 
              console.log(moment(element.applicationDate).format("MM/DD/YYYY")); 
              element.applicationDate = moment(element.applicationDate).format( "Do MMMM YYYY" ); 
              console.log(element.applicationDate); 
            }); 
            break; 
          default: 
            alert("something wrong"); 
        } 
      }, 
      error => { 
        console.log(error); 
        if (error.status === 0) { 
          this.router.navigate(["login"]); 
          this.toastr.error("Invalid token!"); 
        } 
        if (error.statusText === "Unknown Error") { 
          // this.dataIsLoading = false; 
          // this.toastr.error("Network Error!", "OOPS!"); 
        } 
      } 
    ); 
  } 

  ngOnDestroy() { 
    // 1. 清理定时器
    if (this.intervalId) {
      clearInterval(this.intervalId);
    }
    // 2. 取消HTTP请求订阅
    if (this.sub) {
      this.sub.unsubscribe(); 
    }
  }
}

额外注意事项 #

• 记得给intervalId和sub变量加上空值判断，避免组件销毁时出现空指针错误
• 如果你的组件有多个订阅或定时器，建议用Subscription集合来统一管理，比如：

  private subscriptions = new Subscription();
  
  // 在订阅时添加到集合
  this.subscriptions.add(this.dataService.getUsers().subscribe(...));
  // 定时器也可以包装成Observable后添加（可选）
  this.subscriptions.add(timer(0, 100000).subscribe(() => { /* 逻辑 */ }));
  
  // ngOnDestroy里统一取消
  ngOnDestroy() {
    this.subscriptions.unsubscribe();
  }
  

  这种方式更简洁，也能避免遗漏任何需要清理的资源。

内容的提问来源于stack exchange，提问作者Humble Dolt