如何在javascript中强制实时显示更新？

Question

如何获取javascript来实时更新我的​​网页？看来我的Chrome浏览器将所有处理工作都投入到所需的计算中，然后进行网页更新。下面是最简单的测试HTML文件。我更愿意看到顺序计数（而不是仅仅跳转到最终值）。我应该用什么替换display.innerHTML=i;？我希望答案不是使用setInterval或类似的东西将我的计算分解为许多计算。当然，这创建的中断将允许显示更新，但我不喜欢如此详细

P粉369196603 · Answer

requestAnimationFrame方式

在退出循环时使用 requestAnimationFrame 或 setTimeout 以允许更新 UI，然后从中断处恢复循环。

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 方式

将您的算法放入 JS 文件中，当需要更新时会发布一条消息

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

并在您的 UI 代码中。

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