Angular 6中setTimeout与clearTimeout偶发失效问题求助

你的问题核心在于定时器实例未被正确清理，且可能存在多次订阅导致多个定时器同时运行，再加上潜在的内存泄漏问题，才会出现调用callUno()后定时器仍执行、甚至mustCallUno判断异常的情况。我来一步步拆解并给出解决方案：

核心原因 #

1. 多次订阅导致定时器叠加：当mustCallUno事件被多次触发时，每次都会创建新的setTimeout和setInterval，但你的代码只保存了最后一次的定时器引用。之前创建的定时器会在后台持续运行，无法被callUno()清除，到期后就会执行抽卡逻辑。
2. 订阅未正确管理：如果组件销毁时没有取消mustCallUno的订阅，会导致订阅一直存在，后续触发事件仍会创建新的定时器，进一步加剧问题。
3. 定时器引用未重置：清除定时器后没有将_timer、_interval置为null，可能导致后续逻辑判断出错。

解决方案 #

方案1：修复原生定时器的管理逻辑 #

修改代码，确保每次触发订阅时先清理已有定时器，同时正确管理订阅生命周期：

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

// 组件类中添加属性
private mustCallUnoSub!: Subscription;
private _timer: number | null = null;
private _interval: number | null = null;

ngOnInit() {
  // 确保只订阅一次事件
  this.mustCallUnoSub = this._hubService.mustCallUno.subscribe(() => {
    // 先清理已有定时器，防止叠加
    this.clearTimers();
    
    this.mustCallUno = true;
    this.countdown = 2000; // 重置倒计时
    
    this._interval = window.setInterval(() => {
      this.countdown -= 100;
    }, 100);
    
    this._timer = window.setTimeout(() => {
      if (this.mustCallUno) {
        this.drawCard(2);
        this.callUno();
      }
    }, 2000);
  });
}

callUno() {
  this.mustCallUno = false;
  this.clearTimers();
}

// 封装清除定时器的方法，避免重复代码
private clearTimers() {
  if (this._timer) {
    window.clearTimeout(this._timer);
    this._timer = null; // 重置引用
  }
  if (this._interval) {
    window.clearInterval(this._interval);
    this._interval = null; // 重置引用
  }
  this.countdown = 2000;
}

ngOnDestroy() {
  // 组件销毁时取消订阅，防止内存泄漏
  if (this.mustCallUnoSub) {
    this.mustCallUnoSub.unsubscribe();
  }
  // 清理剩余定时器
  this.clearTimers();
}

方案2：改用RxJS响应式定时器（更推荐） #

Angular项目中更推荐使用RxJS的timer和interval替代原生定时器，它们更符合响应式编程风格，也更容易管理生命周期：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription, timer, interval } from 'rxjs';

// 组件类中添加属性
private mustCallUnoSub!: Subscription;
private timerSub: Subscription | null = null;
private countdownSub: Subscription | null = null;

ngOnInit() {
  this.mustCallUnoSub = this._hubService.mustCallUno.subscribe(() => {
    this.clearAllSubscriptions();
    
    this.mustCallUno = true;
    this.countdown = 2000;
    
    // 倒计时逻辑
    this.countdownSub = interval(100).subscribe(() => {
      this.countdown -= 100;
    });
    
    // 2秒后执行的逻辑
    this.timerSub = timer(2000).subscribe(() => {
      if (this.mustCallUno) {
        this.drawCard(2);
        this.callUno();
      }
    });
  });
}

callUno() {
  this.mustCallUno = false;
  this.clearAllSubscriptions();
}

private clearAllSubscriptions() {
  if (this.timerSub) {
    this.timerSub.unsubscribe();
    this.timerSub = null;
  }
  if (this.countdownSub) {
    this.countdownSub.unsubscribe();
    this.countdownSub = null;
  }
  this.countdown = 2000;
}

ngOnDestroy() {
  if (this.mustCallUnoSub) {
    this.mustCallUnoSub.unsubscribe();
  }
  this.clearAllSubscriptions();
}

关键说明 #

• 每次触发mustCallUno事件时，必须先清理已有定时器/订阅，防止多个实例同时运行。
• 组件销毁时一定要取消订阅并清理定时器，避免内存泄漏和无效逻辑执行。
• 重置定时器/订阅引用为null，可以避免后续判断时出现无效引用的问题。

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