Angular组件中点击完成测试后如何停止后台运行的定时器？

核心问题 #

你的代码里没有将setInterval的返回值赋值给this.timerInterval变量，导致后续调用clearInterval(this.timerInterval)时，因为timerInterval始终是undefined，根本无法清除定时器，所以跳转页面后定时器还在后台运行，Toastr通知会继续弹出。

具体修复步骤 #

1. 正确初始化定时器并保存引用
   在ngOnInit方法里，启动定时器时必须把setInterval的返回值赋值给this.timerInterval：

// 替换原ngOnInit里的setInterval代码
this.timerInterval = setInterval(() => {
  this.updateTimer();
}, 1000);

2. 完善completeTest方法的定时器清除逻辑
   在用户点击完成测试时，确保定时器被彻底清除，同时将引用置空避免重复操作：

completeTest() {
  // 先清除定时器
  if (this.timerInterval) {
    clearInterval(this.timerInterval);
    this.timerInterval = null;
  }
  
  // 原有业务代码...
  const score: any= 5;
  document.getElementById("dimissModal")?.click();
  // ...其余代码保持不变
}

3. 确保组件销毁时自动清除定时器
   原代码中的ngOnDestroy逻辑是正确的，但现在因为timerInterval有了正确的引用，它会在组件被销毁（比如路由跳转离开当前页面）时自动清除定时器：

ngOnDestroy() {
  if (this.timerInterval) {
    clearInterval(this.timerInterval);
    this.timerInterval = null;
  }
}

4. 修正updateTimer中的自动提交清除逻辑
   当倒计时结束自动提交时，同样要确保定时器被正确清除：

updateTimer() {
  if (this.totalTimeInSeconds > 0) {
    this.totalTimeInSeconds -= 1;
    // ...原有提醒逻辑保持不变
  } else {
    // 倒计时结束，清除定时器并提交
    if (this.timerInterval) {
      clearInterval(this.timerInterval);
      this.timerInterval = null;
    }
    this.completeTest();
  }
}

额外优化建议 #

• 可以考虑使用Angular的interval Observable替代原生setInterval，结合takeUntil操作符来管理定时器，这样在组件销毁时会自动取消订阅，更符合Angular的响应式编程习惯。
• 检查pad方法的返回值，原代码里没有return语句，会导致时间格式显示异常：

pad(val: number): string {
  return val < 10 ? `0${val}` : `${val}`;
}

内容的提问来源于stack exchange，提问作者Vishal Lengare