如何在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;
};