vue.js, setTimeout 干扰了我的简单倒计时答案

【问题标题】：vue.js, setTimeout interfere with my simple countdownvue.js, setTimeout 干扰了我的简单倒计时
【发布时间】：2020-07-12 08:55:51
【问题描述】：

我已经简化了我的代码来澄清问题，这个 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>

谢谢

这是jsfiddle的链接

【问题讨论】：

当你按下下一个 make set countDown 到 10 秒
感谢@CodeBug，我刚试过，不行
如果您为您的代码添加在线游乐场示例会很好 - Online demo
感谢@Muhammad 我刚刚添加了链接

标签： vue.js settimeout cleartimeout

【解决方案1】：

当您按下下一步时，您还应该清除倒数计时器。请参阅下面的 sn-p。

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>

【讨论】：