How to force real-time display updates in javascript?

Question

How can I get javascript to update my webpage in real time? It seems like my Chrome browser is putting all the processing work into the calculations required and then updating the web page. Below is the simplest test HTML file. I'd rather see sequential counting (rather than just jumping to the final value). What should I replace display.innerHTML=i; with? I hope the answer is not to use setInterval or something similar to break my calculation into many calculations. Of course the interrupt this creates will allow the display to update, but I don't like being so detailed

P粉369196603 · Answer

requestAnimationFramemethod

Use requestAnimationFrame or setTimeout when exiting the loop to allow the UI to be updated, then resume the loop from where it left off.

const display = document.getElementById("Display");

function process() {

  let index = 0;
  const max = 3000000000;
  
  function run () { 
    while (index <= max) {
      if (index % 100000000 == 0) {
        display.innerHTML = index;
        break;
      }
      index++;
    }
    if (index++ <= max) window.requestAnimationFrame(run);
  }
  
  run();
}

process();

Web Worker method

Put your algorithm into a JS file and a message will be posted when it needs to be updated

for (let i = 0; i <= 3000000000; i++) {
    if (i %   100000000 == 0) self.postMessage(i);
}

and in your UI code.

const display  = document.getElementById("Display");
const myWorker = new Worker("workerAlgorithm.js");
myWorker.onmessage = (e) => {
  display.innerHTML = e.data;
};