小程序setInterval倒计时数据没有按秒更新,请问是怎么回事?

发布于 2022-09-11 14:46:27 字数 1737 浏览 17 评论 0

问题描述

因为项目需要做倒计时,但是console.log的时候是按秒输出的数据,页面上的数据更新却不是如此,而是每7,8秒更新一次,如倒计时为:00:10 ,下一次更新的描述要到7或8秒后,变成00:02
而这个延迟更新的现象,只在不进行操作的时候发生,当我不停上下滚动页面的时候,倒计时是正常进行的;

问题出现的环境背景及自己尝试过哪些方法

相关代码

// 请把代码文本粘贴到下方(请勿用图片代替代码)
//这个函数就是倒计时的操作,传入的arr是需要做倒计时的商品,在里面有需要倒计时的秒数
countDown(arr){

    var timer=null;
    var timeArr=[];
    var that = this;
    for(let i in arr){    //把所有需要倒计时的秒数传入一个新数组timeArr
        timeArr[i] = arr[i].show.time
    }
    console.log("获取数组",timeArr);
    timer=setInterval(function(){
        var day=0,
        hour=0,
        minute=0,
        second=0;//时间默认值
        for(let i in timeArr){    //遍历timeArr,然后把那些秒数转换为相对应的格式
            let times = timeArr[i] 
            if(times > 0){
                day = Math.floor(times / (60 * 60 * 24));
                hour = Math.floor(times / (60 * 60)) - (day * 24);
                minute = Math.floor(times / 60) - (day * 24 * 60) - (hour * 60);
                second = Math.floor(times) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
            }
            if (day <= 9) day = '0' + day;
            if (hour <= 9) hour = '0' + hour;
            if (minute <= 9) minute = '0' + minute;
            if (second <= 9) second = '0' + second;
            that.skill.list[i].show.w_time[0]=day;that.skill.list[i].show.w_time[1]=hour;
            that.skill.list[i].show.w_time[2]=minute;that.skill.list[i].show.w_time[3]=second;
            console.log( "time"+i+" is: "+day+"天:"+hour+"小时:"+minute+"分钟:"+second+"秒");
            if(times<=0){
                that.skill.list[i].show.w_time=['00','00','00','00']
            } 
            timeArr[i]--;
        }
    },1000);
}

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

孤独难免 2022-09-18 14:46:27

明白了,因为setInterval是延迟操作,所以每一次结束的时候要重新渲染一下页面,在
“timeArr[i]--;”下面加一句“that.$apply();”就可以了

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文