我有一段 javascript 循环多次计算内容，它应该在每次迭代时输出一些文本到屏幕，但它会消失很长时间并一次将所有内容刷新到屏幕。
可能有已知的技巧可以让事物迭代更新而不是挂在输出上然后刷新，问题是我不知道它们！
任何帮助表示赞赏。
更新：我按照你们中的一些人的建议修改了我的代码以使用 setTimeout，但恐怕它没有帮助。在处理完成之前，我仍然看不到任何东西。我也尝试增加超时，但效果仍然相同（通过增加每次迭代之间的超时，显然需要更多时间，但浏览器仍然无响应）。有什么想法吗？
【问题讨论】：
标签： javascript rendering real-time
这听起来像是预期的行为。 JavaScript 的运行速度可能快于浏览器呈现其输出的速度。
听起来您想显示操作的进度列表？也许您可以将它们全部放在页面上，使用display: none 并将它们切换到display: block 可能会更快。
或者，如果您不想要绝对精度，请使用setTimeout()。
【讨论】：
您应该假设在您的代码运行时，屏幕上的视图不会更新（在最坏的情况下，甚至浏览器用户界面也会无响应）。您需要将处理拆分为多个步骤，并让浏览器偶尔处理事件。我不知道你的确切问题是什么，但这里有一个应该接近的例子。
var i = 0;
function count() {
i++;
document.getElementsById("log").innerHTML += i + "<br />";
setTimeout(count, 1000);
}
count();
超时可能非常小。使用 0 超时让浏览器处理事件，然后立即返回到您的代码。请记住让浏览器处理事件的频率足够高，以使页面保持响应。
最近有一些与supporting threads in the browser 相关的工作，但这种东西还没有真正得到所有大型浏览器的支持。
【讨论】：
setTimeout()、setInterval() 是在 javascript 中实现等待/暂停功能的最佳方式。 这是显示 10 个数字的示例程序，每个数字之间的时间间隔为 100 毫秒。
<button id="startProgram" onclick="startProgram()">Start</button>
<div id="content"></div>
<script type="text/javascript">
function startProgram() {
var content = document.getElementById("content");
var string = "";
for(var i = 0; i < 10; i++) {
string = string + i + "<br/>";
setTimeout('display("' + string + '")', 100 * i);
}
}
function display(string) {
content.innerHTML = string;
}
</script>
将此代码粘贴到空白 html 文件中进行检查。
【讨论】：
如果您只需要支持最前沿的浏览器，请使用Web Workers.
【讨论】：