【计时器的使用】vue3笔记

要停止Vue中的计时器，您可以使用clearInterval函数或clearTimeout函数来清除计时器。具体操作取决于您要停止的计时器类型。

使用setInterval函数创建的循环计时器

如果是使用setInterval函数创建的循环计时器，您可以按照以下步骤停止计时器：

在Vue组件中，声明一个变量来保存计时器的ID：

data() {
  return {
    timerId: null
  }
}

在需要开始计时的地方使用setInterval函数，并将其ID保存在变量中：

startTimer() {
  this.timerId = setInterval(() => {
    // 执行某些操作
  }, 1000);
}

当需要停止计时器时，调用clearInterval函数并传入之前保存的计时器ID：

stopTimer() {
  clearInterval(this.timerId);
}

使用setTimeout函数创建的延迟计时器

如果是使用setTimeout函数创建的延迟计时器，您可以按照以下步骤停止计时器：

在Vue组件中，声明一个变量来保存计时器的ID：

data() {
  return {
    timerId: null
  }
}

在需要开始计时的地方使用setTimeout函数，并将其ID保存在变量中：

startTimer() {
  this.timerId = setTimeout(() => {
    // 执行某些操作
  }, 1000);
}

当需要停止计时器时，调用clearTimeout函数并传入之前保存的计时器ID：

stopTimer() {
  clearTimeout(this.timerId);
}

通过这些步骤，您可以停止Vue中的计时器。确保在适当的时机调用停止计时器的函数以避免不必要的资源消耗。

案例

<template>
  <div>
    <h2>{{ time }}</h2>
    <button @click="startTimer" v-show="!isRunning">开始</button>
    <button @click="stopTimer" v-show="isRunning">停止</button>
  </div>
</template>

<script>

export default {
  data() {
    return {
      time: 0, // 计时器初始值
      isRunning: false, // 计时器运行状态
      timerInterval: null // 定时器对象
    }
  },
  methods: {
    startTimer() {
      if (!this.isRunning) {
        this.isRunning = true;
        this.timerInterval = setInterval(() => {
          this.time++;
        }, 1000);
      }
    },
    stopTimer() {
      if (this.isRunning) {
        clearInterval(this.timerInterval);
        this.isRunning = false;
      }
    }
  }
} 
</script>