vue中循环倒计时怎么实现

最新推荐文章于 2024-09-20 03:01:07 发布

幻淘

最新推荐文章于 2024-09-20 03:01:07 发布

阅读量1.4k

点赞数

文章标签： vue.js javascript

本文链接：https://blog.csdn.net/taoyiw/article/details/111246919

版权

本文主要探讨在Vue.js中遇到的倒计时问题及解决方案。当尝试在setInterval和clearInterval之间平衡以实现倒计时功能时，作者发现不使用clearInterval无法清除倒计时，而使用它则导致倒计时失效。解决策略是将定时器和定时内容逻辑分离，通过data属性控制倒计时的开关和显示。

摘要由CSDN通过智能技术生成

vue中倒计时怎样实现

一、问题描述

我在使用setInterval的同时使用clearInterval，倒计时不生效，不使用clearInterval倒计时又清除不了，该怎么解决呢？

二、解决办法

宗旨就是：将定时器和定时内容分开写
data中定义onOff表示滑块打开关闭，timeShow表示倒计时间和文字是否显示，secondValue表示选择的倒计时时间，secondTime倒计记时时间，contentValue
显示的时间。

//离开页面，销毁定时器
beforeDestroy(){
	clearInterval(this.timer)
},

methods:{
	time(){
	//倒计时的内容
		this.secondTime--;
		this.contentTime=this.secondTime;
		if(this.secondTime==0){
			this.getList();
			this.secondTime=this.secondValue;
		}
	},
	timeChange(val){
	//下拉选择时间变化
		this.timeShow=false;
		this.secondValue=val;
		this.secondTime=val;
		this.contentTime=this.secondTime;
		if(this.onOff==true){
			this.timeShow=true
		}
	},
	refreshData(val){
	//滑块滑动时间；
		this.onOff=val
	}
},
watch:{
	onOff(newData){
	//循环倒计时，因为默认进入页面倒计时10s&#x