Progressbar не обновляется, пока работает JS

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

Вот способ сделать это 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"/>

Answer 2

Вы можете использовать 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"/>