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

NorthEdge

已于 2023-12-10 21:36:49 修改

阅读量1.2k

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

于 2022-04-08 14:50:26 首次发布

本文链接：https://blog.youkuaiyun.com/ATTK_Time/article/details/124040811

本文讲述了作者在模仿故宫博物馆网站时遇到轮播图定时器问题的解决方案，通过将定时器函数和状态分离，利用Vue组件的生命周期钩子`mounted`和`beforeDestroy`来管理和关闭定时器，确保图片切换的平滑和周期准确。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题历程：

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

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