如何在javascript中强制实时显示更新？
P粉148434742
2023-09-04 17:44:30
<p>如何获取 javascript 来实时更新我的网页？
看来我的 Chrome 浏览器将所有处理工作都投入到所需的计算中，然后进行网页更新。下面是最简单的测试 HTML 文件。我更愿意看到顺序计数（而不是仅仅跳转到最终值）。我应该用什么替换 <code>display.innerHTML = i;</code> ？</p>
<p>我希望答案不是使用 setInterval 或类似的东西将我的计算分解为许多计算。当然，这创建的中断将允许显示更新，但我不喜欢如此详细地管理它......我希望有一个可用的“阻止”显示功能，以便这里的计数不会继续进行，直到浏览器渲染我的显示更新（或者是否有像 C 提供的“刷新”命令？）。如果需要，我可以使用开发者控制台，但这也不理想。</p>
<pre class="brush:php;toolbar:false;"><!DOCTYPE html>
<html>
<body>
<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; };