problem description
because the project needs to do a countdown, but the data output in console.log is output in seconds, but the data on the page is not updated. Instead, it is updated every 7 seconds and 8 seconds. For example, the countdown is 00:10, and the description of the next update will become 00:02
after 7 or 8 seconds. This delayed update only occurs when no operation is performed. When I keep scrolling up and down the page, the countdown is normal.
the environmental background of the problems and what methods you have tried
related codes
/ / Please paste the code text below (do not replace the code with pictures)
/ / this function is the countdown operation. The arr passed in is an item that needs to be countdown, in which there is the number of seconds to count down
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);
}