vue3中每次启用定时器时关闭上一次的定时器

在Vue 3中，如果你想确保每次开启新的定时器时关闭之前的定时器，可以在需要启用新定时器的地方先检查并清除之前设置的定时器。这里有一个例子，假设我们有一个计数器的功能：

import { ref } from 'vue';

export default {
  data() {
    return {
      count: 0,
      timerRef: ref(null),
    };
  },
  methods: {
    incrementCounter() {
      // 清除旧的定时器
      this.stopTimer();

      this.count++;
      // 新建定时器
      this.startNewTimer();
    },
    startNewTimer() {
      this.timerRef.value = setTimeout(() => {
        this.incrementCounter(); // 调用自身递归
      }, 1000);
    },
    stopTimer() {
      if (this.timerRef.value) {
        clearTimeout(this.timerRef.value);
        this.timerRef.value = null;
      }
    },
  },
};

在这个例子中，`incrementCounter`方法会首先调用`stopTimer`来清除上一个定时器，然后再开启一个新的。