vue 中添加倒计时效果-CSDN博客

首先：

创建一个定时器函数

/**
 * 倒计时
 */
countTime () {
  if (this.maxtime >= 0 && this.maxtime <= 600) {
    this.minutes = Math.floor(this.maxtime / 60)
    if (this.minutes <= 9) {
      this.minutes = '0' + Math.floor(this.maxtime / 60)
    }
    this.seconds = Math.floor(this.maxtime % 60)
    if (this.seconds <= 9) {
      this.seconds = '0' + Math.floor(this.maxtime % 60)
    }
    --this.maxtime
    let _this = this;
    this.timer = setTimeout(() => {
      _this.countTime();
    }, 1000);

  } else {
    this.timer = null;
    alert('任务超时，本次任务已回收')
  }
},

　　然后：

在created钩子进行调用，千万不要再mouthed里面进行调用，只会执行一次！！代码如下：

created() {
    if ( this.countTime ) {
      clearTimeout(this.countTime);
    }
    this.countTime();
  },

　　再然后你就会发现，当你离开定时器那个页面后，定时器还在偷偷执行，等时间结束的时候就是执行你的else！

　　解决方法如下：

  beforeDestroy() {
    clearInterval(this.timer);
    this.timer = null;
  },

这样子欧克了！

转载于:https://www.cnblogs.com/BLOGZR/p/10861059.html