Question

我目前正在开发测验应用程序，我现在需要显示一个

倒数计时器
问题
问题选择

每个问题功能的倒数计时器可以正常工作如果尚未点击 answer按钮，或者尚未调用 MqCheckAnswer 功能

但是，当用户单击答案时，倒数计时器突然快速执行。

它的延迟大约为0.3秒，而不是1秒的延迟。即。 5,4,3,2,1 调用 MqCheckAnswer 函数时的输出：5,3,2,0

有人可以帮助我解决此问题吗？

html文件

<div *ngIf="MqQuizIsActivate">
<div class="progress">
    {{ current }}
</div>
<ion-row no-padding>

        <ion-col col-6 *ngFor="let data of MqlocalQuizData[MqActiveQuestion].QuesChoices">
            <button ion-button color="light" class="B_pclass_choices" (click)="MqCheckAnswer(data)">{{data.Choices}} </button>                                                    
        </ion-col>

</ion-row>
</div>

ts文件

//Setup the Quiz
MqSetQuiz() {
  if(this.MqQuizIsActivate){

      if(this.MqActiveQuestion != this.MqlocalQuizData.length){
          // Timer for each Question
          this.current = this.MqlocalQuizData[this.MqActiveQuestion].eaQuesTimer;
          this.MqEachQuizTimer(); 
      }
      else {
      this.MqQuizIsActivate = false;
      this.MqSetQuiz();
      }
  }    
}


//When answer button is clicked
MqCheckAnswer(data){
      if (data.correct) {
          this.MqCorrectAnswer++;
      }
          this.MqActiveQuestion++;
          this.MqSetQuiz();
    }



//Timer for Each Question
MqEachQuizTimer(){
setTimeout(() => {

    if(this.current != 0) {
        this.current--;           
        this.MqEachQuizTimer();
      }
      else {

        this.MqActiveQuestion++;
        this.MqSetQuiz();

      }
}, 1000);

}

Answer 1

我假设current存储剩余时间。

您应该使用MqEachQuizTimer()。而不是递归调用setInterval。

另外，使用句柄（我将其称为this.interval）来清除问题的回答间隔，如下所示：

MqEachQuizTimer() {
  this.interval = setInterval(() => {
    this.current--;
  }, 1000)
}

MqCheckAnswer(data) {
  if (data.correct) {
      this.MqCorrectAnswer++;
  }
  this.MqActiveQuestion++;
  this.MqSetQuiz();
  clearInterval(this.interval) // this will stop the timer
}

这可能不完全是您想要做的，但它应该使您沿着正确的方向前进。

为什么倒数计时器突然执行得很快？

1 个答案: