问题描述
小程序使用定时器编写倒计时功能时,会出现跳数和卡顿的情况
问题代码:
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);