Question

我有一段javascript循环多次计算东西，它应该输出一些文本来筛选每次迭代，但它会消失很长一段时间并立即将所有内容刷回屏幕。

可能有一些已知的技巧让迭代更新的东西而不是挂在输出上然后刷新，问题是我不知道它们！

任何帮助表示感谢。

更新：我改变了我的代码以使用setTimeout作为你的一些建议，但我担心它没有帮助。在处理完成之前，我仍然看不到任何东西。我也尝试增加超时但效果仍然相同（通过增加每次迭代之间的超时，显然需要更多时间，但浏览器仍无响应）。有什么想法吗？

Answer 1

您应该假设在代码运行时，屏幕上的视图不会更新（在最坏的情况下，甚至浏览器用户界面也不会响应）。您需要将处理拆分为多个步骤，然后让浏览器暂时处理事件。我不知道你的确切问题是什么，但这里有一个应该接近的例子。

var i = 0;

function count() {
  i++;
  document.getElementsById("log").innerHTML += i + "<br />";
  setTimeout(count, 1000);
}

count();

超时可能非常小。使用超时0可让浏览器处理事件，然后立即返回到您的代码。只需记住让浏览器经常处理事件，以便页面保持响应。

最近有一些与supporting threads in the browser相关的工作，但所有大型浏览器并没有真正支持这种东西。

Answer 2

这听起来像预期的行为。 JavaScript的运行速度可能比浏览器渲染输出的速度快。

听起来你想要显示行动的进度列表？也许您可以将所有内容全部放在页面上，display: none并将其切换为display: block可能会更快。

或者，如果您不想要绝对精确度，请使用setTimeout()。

Answer 3

setTimeout（），setInterval（）是在javascript中实现等待/暂停功能的最佳方法。这是一个示例程序，用于显示每个之间100毫秒时间间隔的10个数字。

<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文件中以进行检查。

Answer 4

如果您只需要支持最前沿的浏览器，请使用Web Workers.

在循环中使用javascript渲染文本 - 浏览器无响应

4 个答案: