问题描述

小程序使用定时器编写倒计时功能时，会出现跳数和卡顿的情况

问题代码：

let second = props.second;
data.tmpStr = `已发送${second}s`;
data.timer = setInterval(()=>{
  second--;
  data.tmpStr = `已发送${second}s`;
  second < 0 && stop();
},1000);

第一次尝试

把setInterval改成setTimeout并用递归实现倒计时功能，卡顿减轻但还是有卡顿情况

第二次尝试

使用京东组件库里面得倒计时组件，卡顿变成两秒一跳，不符合需求

最终尝试

使用Date对象记录倒计时结束的时间，然后用当前时间和记录时间的差值取整来标识倒计时的秒数

实现代码

let second = new Date().getTime() + props.second*1000;
let countDown = parseInt((second-new Date().getTime())/1000);
data.tmpStr = `已发送${countDown}s`;
data.timer = setInterval(()=>{
   countDown = parseInt((second-new Date().getTime())/1000);
   data.tmpStr = `已发送${countDown}s`;
   (second-new Date().getTime()) < 0 && stop();
 },100);