Angular中倒计时归零时自动执行next函数并重启定时器方案

嘿，我来帮你搞定这个倒计时自动触发下一题的需求！先看看你现有的组件代码，我们一步步修改它：

你的现有组件代码 #

import { Component ,OnInit} from '@angular/core';
import { QuizService } from './quiz.service';
import { timer } from 'rxjs';
import { take, map } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  questions : any;
  // 查看该值
  countdown;
  count=30;
  selectedQuestion;
  // 显示当前选中的题目
  counter=0;
  // 记录分数
  score= 0;
  selectedvalue;
  length;

  // 通过Quiz Service获取所有题目
  constructor(private quiz: QuizService ){ }

  ngOnInit(){
    this.quiz.getQuestions().subscribe( (res) =>{
      this.questions = res;
      this.length= this.questions.length;
      if(!this.selectedQuestion) {
        this.selectedQuestion = this.questions[0];
      }
    })

    this.countdown = timer(0,1000).pipe(
      take(this.count),
      map(()=> --this.count)
    );
  }

  // 收集选中的答案值
  onchange(e){
    this.selectedvalue =e.target.value;
  }

  // 切换下一题的next函数
  next(){
    if(this.selectedvalue === this.selectedQuestion.Answer) {
      this.score = this.score +10;
    }
    if(this.counter < this.questions.length -1) {
      this.selectedQuestion = this.questions[this.counter + 1];
      this.counter++;
    }else{
      this.counter++;
    }
  }
}

问题分析 #

当前的倒计时逻辑只执行30次就停止了，没有在倒计时结束时触发next()，也没有重启倒计时的机制。我们需要修改倒计时逻辑，让它在每次归零时自动切换题目，并且在还有题目的情况下重启倒计时。

修改后的完整代码 #

import { Component ,OnInit, OnDestroy} from '@angular/core';
import { QuizService } from './quiz.service';
import { timer, Subscription } from 'rxjs';
import { map, tap } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, OnDestroy {
  questions : any;
  countdownSubscription: Subscription; // 保存订阅对象，用于销毁时清理
  count=30;
  selectedQuestion;
  counter=0;
  score= 0;
  selectedvalue;
  length;

  constructor(private quiz: QuizService ){ }

  ngOnInit(){
    this.quiz.getQuestions().subscribe( (res) =>{
      this.questions = res;
      this.length= this.questions.length;
      if(!this.selectedQuestion) {
        this.selectedQuestion = this.questions[0];
        this.startCountdown(); // 获取到题目后启动倒计时
      }
    })
  }

  // 封装倒计时启动方法
  startCountdown() {
    // 重置倒计时数值
    this.count = 30;
    // 如果之前有订阅，先取消避免内存泄漏
    if(this.countdownSubscription) {
      this.countdownSubscription.unsubscribe();
    }
    // 创建新的倒计时订阅
    this.countdownSubscription = timer(0, 1000).pipe(
      map(() => --this.count),
      tap(currentCount => {
        // 当倒计时归零时触发操作
        if(currentCount === 0) {
          this.next(); // 执行切换题目
          // 如果还没到最后一题，重启倒计时
          if(this.counter < this.questions.length) {
            this.startCountdown();
          }
        }
      })
    ).subscribe(); // 必须订阅才会执行倒计时逻辑
  }

  onchange(e){
    this.selectedvalue =e.target.value;
  }

  next(){
    if(this.selectedvalue === this.selectedQuestion.Answer) {
      this.score = this.score +10;
    }
    if(this.counter < this.questions.length -1) {
      this.selectedQuestion = this.questions[this.counter + 1];
      this.counter++;
    }else{
      this.counter++;
      // 到最后一题时，取消倒计时订阅
      if(this.countdownSubscription) {
        this.countdownSubscription.unsubscribe();
      }
    }
  }

  // 组件销毁时清理订阅，彻底避免内存泄漏
  ngOnDestroy() {
    if(this.countdownSubscription) {
      this.countdownSubscription.unsubscribe();
    }
  }
}

关键修改说明 #

1. 添加订阅管理：新增countdownSubscription对象保存倒计时的订阅，在组件销毁和重启倒计时时取消旧订阅，防止内存泄漏。
2. 封装倒计时启动方法：把倒计时逻辑抽成startCountdown方法，方便初始化和倒计时结束后重复调用，每次调用都会重置倒计时为30秒。
3. 监听倒计时结束：用tap操作符监听倒计时数值，当数值归零时立即执行next()切换题目，同时判断是否还有未完成的题目，有则重启倒计时。
4. 最后一题停止倒计时：在next()方法中，当到达最后一题时取消倒计时订阅，避免不必要的后台执行。

这样修改后，每当倒计时归零时就会自动切换到下一题，并且自动重启30秒倒计时，直到所有题目完成。

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