Vue.js中调用setInterval重启倒计时时计数器加速跳数问题求助

嘿，这个问题我太熟了！你遇到的核心问题是多个定时器叠加运行——每次调用countDownTimer都会新建一个setInterval定时器，但之前的定时器并没有被清除，导致多个定时器同时在修改countDown变量，自然就会出现加速跳数字的异常情况。

具体修改方案 #

我们需要把定时器的引用保存到组件实例中，这样每次启动新倒计时前就能先清除旧的定时器，同时重置倒计时数值，确保每一轮倒计时都是独立且正常运行的。

修改后的完整代码

<template>
  <div> {{ countDown }} </div>
</template>
<script>
export default {
  data() {
    return {
      countDown: 10,
      timer: null // 保存定时器引用，方便后续清除
    };
  },
  methods: { // 修正原代码拼写错误：method → methods
    countDownTimer() {
      // 第一步：清除之前的定时器，避免叠加
      if (this.timer) {
        clearInterval(this.timer);
      }
      // 第二步：重置倒计时为初始值（下一题要重新开始）
      this.countDown = 10;
      // 第三步：启动新的定时器
      this.timer = setInterval(() => {
        if (this.countDown > 0) {
          this.countDown--;
        } else {
          clearInterval(this.timer);
          this.timer = null; // 倒计时结束后清空引用，避免内存泄漏
        }
      }, 1000);
    },
    nextquestion(){
      this.countDownTimer();
    },
  },
  mounted() {
    this.countDownTimer();
  },
  beforeUnmount() {
    // 组件销毁时清除定时器，防止内存泄漏
    if (this.timer) {
      clearInterval(this.timer);
    }
  }
};
</script>

关键改动说明 #

• 保存定时器引用：在data中添加timer变量，用来存储定时器的ID，这样我们能在任何时候访问并清除它。
• 先清旧定时器再建新的：每次调用countDownTimer时，先检查并清除之前的定时器，确保同一时间只有一个定时器在运行。
• 重置倒计时数值：启动新倒计时前把countDown重置为10，保证下一题的倒计时从初始值开始。
• 组件销毁时清理定时器：添加beforeUnmount钩子，在组件被销毁前清除定时器，避免不必要的内存占用。

这样修改后，不管你在倒计时结束前调用多少次nextquestion，每一轮倒计时都会正常从10开始，不会再出现加速跳数的问题啦！

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