Vue制作轮播图中动态调整定时器存在

问题历程 ：

        这段时间在模仿故宫博物馆的网站，在做轮播图得时候遇到了很多问题，其中一个问题就是当我切换一个到另一张图片得时候，定时器应该重新计时，不然就会出现不足一个周期图片就会切换的问题。

        一开始我是把定时器放在了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;
         },
	}