【计时器的使用】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>
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值