vue 一分钟倒计时功能实现

我总是词不达意

已于 2022-07-19 19:03:55 修改

阅读量2k

点赞数 2

分类专栏：前端 JavaScript vue 文章标签： vue.js javascript 前端 js

于 2022-07-19 18:59:09 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_43743175/article/details/125878491

版权

前端同时被 3 个专栏收录

86 篇文章

订阅专栏

vue

46 篇文章

订阅专栏

JavaScript

29 篇文章

订阅专栏

本文展示了如何在Vue.js中实现一个点击触发的倒计时功能，并在倒计时结束后重新开始。在`data`中定义了相关变量，在`methods`中定义了`countdowm`方法，用于启动60秒倒计时。同时，使用`beforeDestroy`生命周期钩子确保在离开页面时清除定时器，避免资源泄漏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML

<template>
  <div @click="countdowm" v-text="content "></div>
</template>

在data里边定义相关变量

data() {
    return {
      content: "倒计时",
      canClick: true,
      refreshData: null
    };
  },

在methods里边定义相关方法

methods: {
  countdowm() {
    let totalTime = 60;
    if (!this.canClick) return; //节流
    this.canClick = false;
    this.content = totalTime + "s后重新倒计时";
    this.refreshData = window.setInterval(() => {
      totalTime--;
      this.content = totalTime + "s后重新倒计时";
      if (totalTime < 0) {
        //当倒计时小于0时清除定时器
        window.clearInterval(this.refreshData); //清除定时器
        this.content = "重新开始倒计时";
        totalTime = 60;
        this.canClick = true; //这里重新开启
      }
    }, 1000);
  }
},

离开页面时销毁定时器

//beforeDestroy为实例销毁之前调用
beforeDestroy() {
  if (this.refreshData) {
    // console.log('销毁倒计时')
    clearInterval(this.refreshData);
    this.refreshData = null;
  }
}