vue之setInterval()实例 ------定时循环显示

今天做大屏，有一个需求是要定时切换图表数据然后我就想到了setInterval()，刚开始做的时候他是
这里我用的是ElementUI的radio单选框
用了三个单选框，要求页面加载进去需要显示数据，所以radio初始赋值1

data(){
	raturn{
		radio:1
	}
}
triggerechartfour（）{
this.radio = 1
	var timer = setInterval(() => {  //注意这里要用ES6的箭头函数，否则this会找不到
			this.dataswitch()
	},5000)
}
dataswitch(){
		++ this.radio     
		if(this.radio == 4){
			this.radio = 1
		}
}

如果说循环几次还行，但是无限次循环电脑肯定受不了
那么在第一次循环结束的时候清空上一次的循环
接着开启新的循环
像我这个是三个为一次完整的循环，那么在最后第三个循环完的时候使用clearInterval(timer)把这一次的循环停止，然后再开启新的循环，setTimeout()做一个延迟，以保证不会立马开启下一轮循环

triggerechartfour（）{
this.radio = 1
	var timer = setInterval(() => {  //注意这里要用ES6的箭头函数，否则this会找不到
			this.dataswitch()
			if(this.radio == 3){  //第三次循环结束
				clearInterval(timer)   //停止上一次循环
				setTimeout(()=>{
					this.triggerechartfour()     //开启新一轮循环
				},5000)
			}
	},5000)
}