问题历程 :
这段时间在模仿故宫博物馆的网站,在做轮播图得时候遇到了很多问题,其中一个问题就是当我切换一个到另一张图片得时候,定时器应该重新计时,不然就会出现不足一个周期图片就会切换的问题。
一开始我是把定时器放在了mounted里面的,自动执行,但是随后就发现了在给切换图片的click事件里面没法去直接关闭mounted中定时器,于是想到把定时器直接放在data中,但是也发现并不能实现关闭,然后参考了一下资料,发现了其中一个很好的解决办法。
解决问题:
首先把定时器要执行的函数放在methods中,以及把定时器得中间变量放在data中
data(){ return{ timer:null, } }, methods:{ settime() { // do somethings... }, }
最关键的来了,在methods中定义一个settimer方法,
settimer() { if (this.timer == null) { this.timer = setInterval(this.settime, time); } },
当this.timer为null就代表定时器被关闭了,这样我们就把定时器赋给this.timer这样的话也就相当于开启了定时器,如果要关闭定时器的话可以这么写
slickbutton(index) { clearInterval(this.timer); //清楚旧的定时器 this.timer = null; //从新设置timer为Null为下一次开起定时器准备 this.settimer(); //重新开起定时器,重新计时 },
如果只要关闭的话就去掉第三行,不再开起
总体代码如下,可以参考
export default {
name:'#app',
data(){
return {
timer:null,
}
},
methods: {
settimer(){
if(this.timer==null){
this.timer = setInterval(this.settime, 6000);
}
},
settime(){
//do somethings....
},
},
mounted(){
this.settimer();
},
beforeDestroy() {
clearInterval(this.timer);
this.timer==null;
},
}