Bootstrap

clearInterval()不生效

用setInterval写了一个定时器,倒计时开始时间一直是7,且不能结束。

问题代码如下

data() {
    return {
      countTime: 18,
    };
  },
  beforeMount() {
    this.getTime();
  },
  beforeDestroy() {
    clearInterval(this.countTime);
  },
  methods: {
    getTime() {
      this.countTime = setInterval(() => {
     	// console.log(this.countTime);
        if (this.countTime > 0) {
          this.countTime--;
        } else {
          clearInterval(this.countTime);
        }
      }, 1000);
    }
  }

clearInterval 失效的原因是,每次倒计时对 countTime 重新赋值,导致clear的不是之前 setInterval 返回的值。但是,还是不知道为什么初始 setInterval 返回值(第一次输出的 this.countTime )一直是 7。

可以重新定义一个变量用于接收 setInterval 返回的值。

getTime() {
      let ctime = this.countTime;
      ctime = setInterval(() => {
        if (this.countTime > 0) {
          this.countTime--;
        } else {
          clearInterval(ctime);
        }
      }, 1000);
    },
;