Wie erzwinge ich Echtzeit-Anzeigeaktualisierungen in Javascript?

Question

Wie kann ich Javascript dazu bringen, meine Webseite in Echtzeit zu aktualisieren? Es scheint, dass mein Chrome-Browser die gesamte Verarbeitungsarbeit in die erforderlichen Berechnungen steckt und dann die Webseite aktualisiert. Unten finden Sie die einfachste Test-HTML-Datei. Ich würde lieber eine sequentielle Zählung sehen (anstatt nur zum Endwert zu springen). Womit soll ich display.innerHTML=i; ersetzen? Ich hoffe, dass die Antwort nicht darin besteht, setInterval oder etwas Ähnliches zu verwenden, um meine Berechnung in viele Berechnungen aufzuteilen. Natürlich ermöglicht die dadurch entstehende Unterbrechung die Aktualisierung der Anzeige, aber ich mag es nicht, so detailliert zu sein

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;
};

Wie erzwinge ich Echtzeit-Anzeigeaktualisierungen in Javascript?

Antworte allen(1)Ich werde antworten