Vue2中clearInterval()不生效问题的解决方法

问题描述

Vue2 项目开始设置如下

data() {
	return {
		timer: null,
    };
},
methods: {
	cancel() {
		clearInterval(this.timer);
    },
    refresh() {
	    this.timer = setInterval(() => {
	    	console.log("refresh");
	    }, 60000);
    }
},

多次 refresh() 和 cancel() 后发现定时器关闭不掉（即使在开启/关闭成对儿使用，乃至关闭>开启时仍失效）。

解决办法

1. 首先将 clearInterval() 换成 window.clearInterval() 。
2. 然后加上限制。如下。

data() {
	return {
		timer: null,
    };
},
methods: {
	cancel() {
		if (this.timer) {
        	window.clearInterval(this.timer);
      	}
    },
    refresh() {
		if (!this.timer) {
		    this.timer = setInterval(() => {
		    	console.log("refresh");
		    }, 60000);
		}
    }
},

.
.
.
.
.
.

---

桃花仙人种桃树，又摘桃花换酒钱_