从javascript循环写入“当它发生”

Question

我想弄清楚，如何写入从“实时”的div div。当我运行代码时，循环中的任何文本只有在两个循环都执行完毕后才会显示，但实际上（我想我写的）的方式，它应该逐行显示出来。

看到一个例子.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.