clearInterval()不生效

最新推荐文章于 2024-05-31 14:59:27 发布

pnpnpna

最新推荐文章于 2024-05-31 14:59:27 发布

阅读量6.4k

点赞数 3

文章标签： javascript

本文链接：https://blog.csdn.net/siriurr/article/details/123705357

版权

用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);
    },