在这里,我试图根据循环的进度更新进度条,但是直到嵌套循环结束时进度条才会更新,这并不理想。
function upload_img() {
// Actual progress bar
progress_bar = document.querySelector("#progress-bar");
document.querySelector("#bar-area").style.display = "flex";
//**Omitted
setTimeout(function() {
//**Omitted
let size = obj_data.length * obj_data[0].length;
for (let row = 0; row < obj_data.length; row++) {
for (let col = 0; col < obj_data[0].length; col++) {
// Incrementing counter
j++;
if (j % 1000 === 0 || j === size) {
//Should be updating progress bar every 1000 out of 13400, but is not doing so until end^^^^
progress_bar.style.width = `${Math.round(j / size * 100)}%`;
console.log(`${j} of ${size} so percent is ${j / size * 100}`)
}
}
}
}, 1)
}
我尝试使用间隔/超时,但它们没有帮助。
1条答案
按热度按时间sr4lhrrt1#
我经常发现使用 async/await 比使用 setTimeout/setInterval 等更容易。然后你所要做的就是在每次循环迭代之间休眠/等待/暂停几毫秒(这给了浏览器时间重新呈现屏幕,因为如果你不暂停脚本,它就不会这样做)。
如果JavaScript有一个sleep函数...实际上,你可以用一行代码写一个sleep函数:接收一个毫秒数,创建一个promise,它将在该毫秒数后解析,并在此函数中使用一次 setTimeout 来实现这一点。
由于使用await是在等待promise解析,因此您可以在循环内执行await sleep(ms)(只要它在async函数内-允许await的函数)。
下面的进度条实现就是基于这个想法,并允许您在循环中更新进度条,如您所愿。
当然,你可以在循环中做其他的事情(或者调用一个做其他事情的函数)--比如上传东西,获取东西等等。但是在这个例子中,我关注的是进度条,你可以在一个循环中更新它。