连续点击定时器会加速累计以及页面销毁的同时销毁定时器

1、正常模式下的定时器

我这里用的是 Vue + uniap 举例

data(){
	return{
		seconds: 60,
	}
},
method: {
	click() {
		let trimer = setInterval(()=>{
			this.seconds--;
			if(this.seconds<=0) {
				clearInterval(trimer);
			}
		})
	}
}

这种写法正常情况下，如果连续快速点击，会导致定时器累积，加速越来越快。

下面是解决方法：

data(){
	return{
		seconds: 60,
		interval : null,
	}
},
methods: {
	click(){
		// 开启定时器之前先清楚定时器
		if (this.interval ) {
			clearInterval(this.interval);
		}
		this.interval = serInterval(()=>{
			this.seconds--;
			if(this.seconds<=0) {
				this.seconds =60;
				clearInterval(this.interval);
			}
		}, 1000);
	}
}

思路就是：在开启定时器之前，先清除定时器。
具体： 在 data 中 定义interval，在方法中将定时器赋值给interval，点击事件，先判断有没有定时器的存在，如果有，就清除，然后正常开启定时器。

页面销毁时清除定时器

在onUnload页面生命周期中销毁

onUnload(){
	clearInterval(this.interval);
}