Angular中使用Promise实现的定时器无法停止的解决方案求助

要解决定时器无法停止、重复调用后旧实例仍运行的问题，需要给定时器添加取消控制机制，同时在启动新定时器时终止旧的实例。

修改后的代码示例 #

// 新增用于控制定时器的取消控制器
timerAbortController = null;

async startTimer() {
    // 启动新定时器前，先终止旧的实例
    if (this.timerAbortController) {
        this.timerAbortController.abort();
    }
    // 创建新的取消控制器
    this.timerAbortController = new AbortController();
    const signal = this.timerAbortController.signal;

    this.count = 30;
    for (let i = 30; i >= 0; i--) {
        // 每次等待前检查是否已取消，直接中断循环
        if (signal.aborted) break;
        
        await new Promise((resolve) => {
            const timeoutId = setTimeout(resolve, 1000);
            // 监听取消信号，触发时立即清除未执行的定时器
            signal.addEventListener('abort', () => clearTimeout(timeoutId));
        });
        
        // 等待结束后再次检查，避免取消后仍更新count
        if (signal.aborted) break;
        this.count = i;
    }
    // 定时器正常结束或被取消后，清空控制器
    this.timerAbortController = null;
}

// 手动停止定时器的方法
stopTimer() {
    if (this.timerAbortController) {
        this.timerAbortController.abort();
        this.timerAbortController = null;
        this.count = 0;
    }
}

关键说明 #

• 用AbortController作为可靠的取消信号源，替代简单变量标识，能精准中断异步流程
• 启动新定时器前主动终止旧实例，避免多个定时器同时运行导致count混乱
• 在setTimeout外层绑定取消监听，确保取消时能立即清除未触发的延迟任务，无残留
• 循环中两次检查取消状态，分别在等待前后，保证流程及时终止
• 新增stopTimer()方法，支持手动触发停止并直接重置count为0

用法 #

• 启动定时器：this.startTimer()
• 手动停止：this.stopTimer()
• 重复调用startTimer()时，旧定时器会自动终止，仅保留最新实例

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