每次我调用setInterval方法时，我的计数器都会加速-VUEJS

Question

我正在开发一个函数调用的倒计时。目标是每次用户回答游戏中的问题时重新启动倒计时，下一个问题是实例化的。我一直面临的问题是，每次我在时间耗尽之前调用功能时，下一个倒计时会加速并跳过数字。

<template>
  <div>
    {{ countDown }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      countDown: 10,
    };
  },
  method: {
    countDownTimer() {
      const timer = setInterval(() => {
        if (this.countDown > 0) {
          this.countDown--;
        } else {
          clearInterval(timer);
        }
      }, 1000);
    },
    nextquestion(){
      this.countDownTimer();
    },
  },
  mounted() {
    this.countDownTimer();
  },
};
</script>

Answer 1

经过大量的研究和尝试，我能够通过一些更改解决此问题：

<template>
  <div>
    {{ countDown }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      countDown: 10,
    };
  },
  created(){
  this.timer = 0;
  },
  method: {
    countDownTimer() {
      clearInterval(this.timer);
      this.timer = setInterval(() => {
        if (this.countDown > 0) {
          this.countDown--;
        } else {
          clearInterval(this.timer);
        }
      }, 1000);
    },
    nextquestion(){
      this.countDown = 10;
      this.countDownTimer();
    },
  },
  mounted() {
    this.countDownTimer();
  },
};
</script>