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