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

问题描述

因为项目需要做倒计时,但是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);
}
阅读 5.3k
1 个回答

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题