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

发布于 2024-09-24 03:10:17 字数 302 浏览 2 评论 0原文

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

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

任何帮助表示赞赏。

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

各自安好 2024-10-01 03:10:17

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

听起来您想显示操作的进度列表？也许您可以将它们全部显示在页面上，使用 display: none 并将它们切换到 display: block 可能会更快。

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

回复收藏 0 原文

坠似风落 2024-10-01 03:10:17

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

var i = 0;

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

count();

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

最近有一些与支持浏览器中的线程相关的工作，但这种东西还没有得到所有大型浏览器的真正支持。

You should assume that while your code is running, the view on the screen will not be updated (and in the worst case, even the browser user interface will be unresponsive). You'll need to split your processing into steps, and let the browser process events once in a while. I don't know what your exact problem is, but here's an example of something that should be close.

var i = 0;

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

count();

The timeout can be really small. Using a timeout of 0 lets the browser process events and then immediately return to your code. Just remember to let the browser process events often enough so the page remains responsive.

There has been some work lately related to supporting threads in the browser, but that kind of stuff isn't really supported by all the big browsers yet.

回复收藏 0 原文

瑶笙 2024-10-01 03:10:17

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

setTimeout(), setInterval() are the best ways to implement wait/pause function in javascript.
Here is sample program to dispay 10 number with 100 millisecs time interval between each.

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

Paste this code into a blank html file to check it.

回复收藏 0 原文