Wie erzwinge ich Echtzeit-Anzeigeaktualisierungen in Javascript?
P粉148434742
2023-09-04 17:44:30
<p>Wie bekomme ich das Javascript, um meine Webseite in Echtzeit zu aktualisieren?
Es scheint, als würde mein Chrome-Browser die gesamte Verarbeitungsarbeit in die erforderlichen Berechnungen stecken und dann die Webseite aktualisieren. 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 <code>display.innerHTML = i;</code> ersetzen? </p>
<p>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 der dadurch erzeugte Interrupt die Aktualisierung der Anzeige, aber ich mag es nicht, das so detailliert zu verwalten ... Ich wünschte, es gäbe eine „Block“-Anzeigefunktion, damit die Zählung hier erst im Browser fortgesetzt wird Rendern meiner Anzeigeaktualisierungen (oder gibt es einen „Aktualisieren“-Befehl, wie er von C bereitgestellt wird?). Bei Bedarf kann ich die Entwicklerkonsole nutzen, aber das ist auch nicht ideal. </p>
<pre class="brush:php;toolbar:false;"><!DOCTYPE html>
<html>
<Körper>
<p id="Display"></p>
<script>
const display = document.getElementById("Display");
for (let i = 0; i <= 3000000000; i++) {
if (i % 100000000 == 0) display.innerHTML = i;
</script>
</body>
</html></pre></p>
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; };