Question

我正在创建一个程序，其中JavaScript正在处理大量数据，因此我想在进度条上显示进度。

问题出在这里：在for循环运行时，进度条不会更新，然后会立即被填充。

document.getElementById("start").addEventListener("click",function(){
    max=1000000
    document.getElementById("pb").max=max
    for(i=0;i<max;i++){
        document.getElementById("pb").value=i+1
    }
    console.log("Finished")
})

<progress id="pb" value="0" max="0"></progress>
<input type="button" id="start" value="Start"/>

我该如何解决这个问题？

如果没有它们，我可能不想使用任何JS库。

感谢您的帮助！

Answer 1

您可以使用requestAnimationFrame：

document.getElementById("start").addEventListener("click",function(){
    var max=100;
    var p=0;
    document.getElementById("pb").max=max;
    var update = function () {
      document.getElementById("pb").value=p; 
      p++;
      if (p <= max) requestAnimationFrame(update);
      else console.log("Finished");
    };
    update();
})

<progress id="pb" value="0" max="0"></progress>
<input type="button" id="start" value="Start"/>

或者只使用setTimeout并增加计时器：

document.getElementById("start").addEventListener("click",function(){
    max=100;
    document.getElementById("pb").max=max;
    for(i=0;i<max;i++){
        setTimeout(function () {
          document.getElementById("pb").value=this;
          if (this == max) console.log("Finished")
        }.bind(i+1), i*16);
    }
})

<progress id="pb" value="0" max="0"></progress>
<input type="button" id="start" value="Start"/>

Answer 2

这是一种async / await方法，..因此您可以保留for循环。

还请注意，我已将最大值减少到1000，因为等待4个半小时可能会过分。：）

function sleep(ms) { return new Promise((r) => 
  setTimeout(r, ms)); }
  
async function run() {
  let max=1000;
  document.getElementById("pb").max=max;
  for(let i=0;i<max;i++){
    document.getElementById("pb").value=i+1
    await sleep(0);
  }
  console.log("Finished")
}

document.getElementById("start").
  addEventListener("click", run);

<progress id="pb" value="0" max="0"></progress>
<input type="button" id="start" value="Start"/>

FOR运行JS时Progressbar不会更新

2 个答案: