Question

我想弄清楚，如何在＆＃34;实时＆＃34;写一个div？来自javascript。当我运行代码时，循环中的任何文本只会在两个循环执行后显示，但实际上是这样（我想我写的），它应该逐行弹出。

查看示例. JsFiddle Demo

我希望它能像Chrome开发人员工具控制台一样工作，您可以立即看到正在发生的事情（使用console.log）。

我知道我可以将它全部放到字符串或数组中并在循环外一次打印，但我确实需要看到它正在发生。

我相信某处肯定已有解决方案，但我无法找到任何线索（可能没有使用谷歌的正确用词）。任何信息都将受到高度赞赏。

修改在控制台和HTML中输出相同，以减少混淆并允许更好的比较 JSFiddle Demo 2

Answer 1

问题是，你的while循环要快。你不会看到输出现场。浏览器需要一些时间来更新文档。你可以在控制台中逐个看到它的原因只是因为控制台要慢。控制台输出延迟线。当您看到控制台中的最后一个条目即将启动时，您的代码已经很久以前就结束了。您的代码执行速度比控制台快。所以这也不是及时。

很容易证明控制台的速度有多慢。看看this example。执行时，在控制台中创建一个简单的循环创建日志条目。之后我们只打印loop finished内容。当您在文档中看到输出时，即使脚本已经停止，控制台仍然会打印行。

您现在可以尝试在循环执行中给浏览器一些时间，输出数据并让浏览器呈现更改。但是因为你在那里使用了循环，所以在开始下一个循环之前，你不能使它异步或创建一个延迟来输出值。但是您可以将代码切换为自动执行功能，并在打印下一行之前缩短浏览器中平滑输出的时间。

如果你创建了这么大的循环，你应该真正处理你的代码。让jQuery再次搜索每个循环中的#log div并不是一个好主意。在循环之前做一次。并且不要使用数组进行这种简单的字符串操作。这会减慢它的速度。

var log = $("#log");
var generateTestCases = 3000;

(function next(amount) {
    if( amount ) {
        var repeatIF2 = 10;
        var trackingString = amount + ";";

        (function output(count) {
            if( count ) {
                trackingString += count + ";";
                log.append('<div>' + trackingString + '</div>');

                if( --count ) {
                    // this line slows down the output
                    // change the time for faster or slower output
                    setTimeout(output, 50, count);
                } else {
                    next(--amount);
                }
            }
        })(repeatIF2);
    }
})(generateTestCases);

Working example.

从javascript循环写入html＆＃34;当它发生时＃34;

1 个答案: