vue.js，setTimeout 干扰了我简单的倒计时

Question

我已经简化了我的代码来澄清问题，这个 vue 页面显示一个问题十秒钟，学生应该在它出现之前说出答案，但问题是，我有一个下一步按钮显示下一个问题，考虑还剩 5 秒，你按下一个按钮，然后倒计时完全撕裂，甚至它显示负数！

<template>
  <div class="container text-center">
      <div v-if = "showQuestion">
     <span> {{ question }} </span>
      <span style="color:red;"> &nbsp;&nbsp;&nbsp;{{ countDown }} </span>

    </div>

    <div v-if = "showAnswer">
            <p> {{ answer }} </p>
    </div>

    <div>
       <button class="btn btn-success" @click="next">next question </button>
         
    </div>
     
  </div>
</template>

<script>
export default {
     data(){
        return{
            questions: ['question1', 'question2', 'question3', 'question4', 'question5'] ,   
            answers: ['answer1', 'answer2', 'answer3', 'answer4', 'answer5'],
           
            question: '',
            answer: '',
           mayVar: null, //controlls setTimeout
            index : 0, 
             showQuestion: true,
             showAnswer: false,
              countDown : 10,           
            
        }
    },
    methods:{
        
            startQuiz(){
               this.countDown = 10;
               this.question = this.questions[this.index];
               this.answer = this.answers[this.index];
               this.countDownTimer();
               this.show();
              
            },

            show(){                
                 this.myVar =  setTimeout(() => { //question fades away and answer shows up
                       this.showQuestion = false;
                       this.showAnswer = true;

                    }, 10000);
            },

             next(){
                  clearTimeout(this.myVar); // 
                 this.index++;// goes to next question
                   this.showQuestion = true;
                 this.showAnswer = false;
                this.startQuiz();
                
             },
                 
             countDownTimer() {
                  
                if(this.countDown > 0) {
                    setTimeout(() => {
                        this.countDown--;
                        this.countDownTimer();
                    }, 1000);
                }
            },
    },

    created(){
      this.startQuiz();
    }
}
</script>

<style>

</style>

谢谢

这里是 link jsfiddle

Answer 1

您还应该在按下一步时清除倒数计时器。请参阅以下代码段。

const app = new Vue({
el: "#app",
data(){
        return{
            questions: ['question1', 'question2', 'question3', 'question4', 'question5'] ,   
            answers: ['answer1', 'answer2', 'answer3', 'answer4', 'answer5'],
           
            question: '',
            answer: '',
           mayVar: null, //controlls setTimeout
            index : 0, 
             showQuestion: true,
             showAnswer: false,
              countDown : 10,   
              count_down_timer: null // controls count down timer
            
        }
    },
    methods:{
        
            startQuiz(){
               this.countDown = 10;
               this.question = this.questions[this.index];
               this.answer = this.answers[this.index];
               this.countDownTimer();
               this.show();
              
            },

            show(){                
                 this.myVar =  setTimeout(() => { //question fades away and answer shows up
                       this.showQuestion = false;
                       this.showAnswer = true;

                    }, 10000);
            },

             next(){
                  clearTimeout(this.myVar); // 
                  clearTimeout(this.count_down_timer)
                 this.index++;// goes to next question
                   this.showQuestion = true;
                 this.showAnswer = false;
                this.startQuiz();
                
             },
                 
             countDownTimer() {
                  
                if(this.countDown > 0) {
                    this.count_down_timer = setTimeout(() => {
                        this.countDown--;
                        this.countDownTimer();
                    }, 1000);
                }
            },
    },

    created(){
      this.startQuiz();
    }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div class="container text-center">
      <div v-if = "showQuestion">
     <span> {{ question }} </span>
      <span style="color:red;"> &nbsp;&nbsp;&nbsp;{{ countDown }} </span>

    </div>

    <div v-if = "showAnswer">
            <p> {{ answer }} </p>
    </div>

    <div>
       <button class="btn btn-success" @click="next">next question </button>
         
    </div>
     
  </div>
</div>

vue.js，setTimeout 干扰了我简单的倒计时

vue.js, setTimeout interfere with my simple countdown

settimeout

cleartimeout

vue.js