js实现多个倒计时并行 js拼团倒计时
本文是对类似于拼团，多个商品每个都有各自的倒计时，一开始接到接到这个需求也是头疼了一阵子，如果是在商品列表少的时候完全就可以写成死的，固定的变量，写几个定时器就ok了，
但是这次数据是活的，看一些拼团app都可以实现，既然能实现就搞起来，有了以下的想法使用环境vue
写一个准备渲染的死数据
data(){
return{
list:[//准备渲染的数据
{
remainTime:900000,//距离结束还有多久
remainTimeStr:''//展示文案
},
{
remainTime:400000,
remainTimeStr:''
},
{
remainTime:60500,
remainTimeStr:''
},
]
}
}
百度copy一个倒计时的方法
countdowm(timestamp){
letself=this
lettimer=setInterval(function(){
letnowTime=newDate()
letendTime=newDate(timestamp)
lett=endTime.getTime()-nowTime.getTime()
if(t>0){
letday=Math.floor(t/86400000)
lethour=Math.floor((t/3600000)%24)
letmin=Math.floor((t/60000)%60)
letsec=Math.floor((t/1000)%60)
hour=hour<10?'0'+hour:hour
min=min<10?'0'+min:min
sec=sec<10?'0'+sec:sec
letformat=''
if(day>0){
format=`${day}天${hour}小时${min}分${sec}秒`
}
if(day<=0&&hour>0){
format=`${hour}小时${min}分${sec}秒`
}
if(day<=0&&hour<=0){
format=`${min}分${sec}秒`
}
self.content=format
}else{
clearInterval(timer)
self.content='over'
}
},1000)
}
捋清逻辑
首先，根据逻辑对倒计时的方法进行更改,我们直接使用的就是距离结束还有多少时间的时间戳，我的思路是用一个定时器达到一个并行多个倒计时的思路，所以先将方法进行优化
- 不需要获取时间
- 也不需要一些时间计算
- 因为是多个倒计时并行所以清楚定时器的逻辑需要进行更改
countdowm(timestamp){
letself=this
lettimer=setInterval(function(){
lett=timestamp
if(t>0){
letday=Math.floor(t/86400000)
lethour=Math.floor((t/3600000)%24)
letmin=Math.floor((t/60000)%60)
letsec=Math.floor((t/1000)%60)
day=day<10?'0'+day:day
hour=hour<10?'0'+hour:hour
min=min<10?'0'+min:min
sec=sec<10?'0'+sec:sec
letformat=''
format=`${day}天${hour}小时${min}分${sec}秒`
self.content=format
}else{
//clearInterval(timer)
self.content='over'
}
},1000)
}
简化完毕，把自己刚才的思路带进方法内
在定时器里写一个循环每次减少一秒让当前数据内remainTime时间戳-1000
countdown(){
letself=this
lettimer=setInterval(function(){
for(leti=0;i0){
letday=Math.floor(t/86400000)
lethour=Math.floor((t/3600000)%24)
letmin=Math.floor((t/60000)%60)
letsec=Math.floor((t/1000)%60)
day=day<10?'0'+day:day
hour=hour<10?'0'+hour:hour
min=min<10?'0'+min:min
sec=sec<10?'0'+sec:sec
letformat=''
format=`距离结束：${day}天${hour}
时${min}分${sec}秒`
self.list[i].remainTimeStr=format
}else{
//进行判断如果数据内所有的倒计时已经结束，那么结束定时器，如果没有那么继续执行定时器
letflag=self.list.every((val,ind)=>
val.remainTime<=0)
if(flag)clearInterval(timer)
self.list[i].remainTimeStr=`距离结束：00天
00时00分00秒`//结束文案
}
}
},1000)
}
这样并行多个定时器就做好了,但是发现了一个问题当你切换路由的时候发下你的定时器如果未结束他还在执行，这样对性能造成了一些影响，虽说用户看不到，但是也要解决，提高用户浏览体验
在你切换页面的时候使用vue中的生命周期函数把数据更改为0就ok
destroyed(){
this.list.forEach((val)=>{
val.remainTime=0
})
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。