一个数组里面有倒计时时间如何不重复访问接口让倒计时自己走。从接口获取倒计时不再重复访问接口,自己倒计时直到结束。时:分:秒的格式倒计时如何自己走

首先列表数组数据接口提供的。我们展示列表的时候要把倒计时(接口给的数据格式是时:分:秒)展示出来。首先想到的是写个定时器一秒钟访问一次接口。但是频繁访问接口会加重服务器的负担。我们可以再进入页面的时候访问一次。然后自己写定时器定时,到0的时候清除定时器。

首先接口给的倒计时时间是12:23:02。我们计算的时候先转换成时间戳:

let time=  (e.split(":")[0])*3600000+(e.split(":")[1])*60000+(e.split(":")[2])*1000;

时间戳转为倒计时时间格式是12:23:02

const h = Math.floor(time / 1000 / 60 / 60 % 24)<10?('0'+Math.floor(time / 1000 / 60 / 60 % 24)):Math.floor(time / 1000 / 60 / 60 % 24),

m = Math.floor(time / 1000 / 60 % 60)<10?('0'+Math.floor(time / 1000 / 60 % 60)):Math.floor(time / 1000 / 60 % 60),

s = Math.floor(time / 1000 % 60)<10?('0'+Math.floor(time / 1000 % 60)):Math.floor(time / 1000 % 60);

let leftTime=h + ":" + m + ":" + s;

知道了这个时间,写个定时器每过一秒钟time减去一秒。就是倒计时在走啦。

function getEndTime(fn,e){
    let time=  (e.split(":")[0])*3600000+(e.split(":")[1])*60000+(e.split(":")[2])*1000;
     
_timer = setInterval(()=>{
  if (time <= 0) {
    // 倒计时结束
    clearInterval(_timer);
    _timer=null;
    getPackagePirceFn();//这个是重新访问接口的函数
    return;
  }
  time=time-1000;
//把倒计时的时间戳转成时:分:秒的格式用于展示
  const h = Math.floor(time / 1000 / 60 / 60 % 24)<10?('0'+Math.floor(time / 1000 / 60 / 60 % 24)):Math.floor(time / 1000 / 60 / 60 % 24),
      m = Math.floor(time / 1000 / 60 % 60)<10?('0'+Math.floor(time / 1000 / 60 % 60)):Math.floor(time / 1000 / 60 % 60),
      s = Math.floor(time / 1000 % 60)<10?('0'+Math.floor(time / 1000 % 60)):Math.floor(time / 1000 % 60);
  let leftTime=h + ":" + m + ":" + s;

  console.log(leftTime)
  fn&&fn(leftTime)
},1000);
}

调用

function (){

....访问接口获取接口数据data

data.forEach(res=>{

   getEndTime(v1=>{

       data[index].leftTime=v1;  //把结果重新定义个变量leftTime接收

       return res;

   },res.time)//res.time就是接口提供的倒计时的时间

})


}

你可能感兴趣的:(前端,javascript)