Schreiben in HTML von einer Javascript-Schleife "wenn es passiert"

Question

Ich versuche herauszufinden, wie man zu einem Div in "Echtzeit" von Javascript schreibt. Wenn ich den Code ausführe, wird jeder Text aus der Schleife nur einmal gezeigt, wenn beide Schleifen ausgeführt wurden, aber wirklich so (ich glaube, ich habe es geschrieben), sollte es zeilenweise herausspringen. nur um arbeiten wie in einem Chrom-Entwickler-Tool Konsole

Sehen Sie ein Beispiel .JsFiddle Demo

ich es möchte, wo man sofort sehen, was (mit console.log) geschieht.

Ich weiß, ich könnte alles auf eine Zeichenkette oder ein Array und drucken Sie es in einem Schritt außerhalb der Schleifen, aber ich muss es wirklich sehen, wie es passiert.

Ich bin sicher, dass es irgendwo schon eine Lösung geben muss, aber ich kann keine Leads finden (vielleicht nicht mit den richtigen Worten für Google). Jede Information würde sehr geschätzt werden.

EDIT: Hergestellt Ausgabe in Konsole HTML und das gleiche, um es weniger verwirrend und zum besseren Vergleich zu ermöglichen JSFiddle Demo 2

Answer 1

Das Problem ist, dass Ihre while Schleifen sind zu fasten. Sie würden die Ausgabe nicht live sehen. Der Browser braucht etwas Zeit, um das Dokument zu aktualisieren. Der Grund, warum Sie es einzeln in der Konsole sehen können, ist, dass die Konsole zu langsam ist. Die Konsole gibt die Zeilen mit einer Verzögerung aus. Wenn der letzte Eintrag in Ihrer Konsole angezeigt wird, ist Ihr Code bereits lange vorher beendet. Ihre Codeausführung ist schneller als die Konsole. Also das ist nicht in der Zeit auch.

Es ist ziemlich einfach zu zeigen, wie langsam die Konsole wirklich ist. Werfen Sie einen Blick auf this example. Wenn es ausgeführt wird, gibt es eine einfache Schleife, die Protokolleinträge in der Konsole erzeugt. Danach drucken wir einfach loop finished auf den Inhalt. Wenn die Ausgabe im Dokument angezeigt wird, druckt die Konsole weiterhin Zeilen, auch wenn das Skript bereits gestoppt wurde.

Sie könnten nun versuchen, dem Browser einige Zeit in Ihrer Schleifenausführung zu geben, um die Daten auszugeben und den Browser die Änderung rendern zu lassen. Da Sie dort jedoch Schleifen verwendet haben, können Sie sie nicht asynchron machen oder eine Verzögerung erstellen, um die Werte zuerst auszugeben, bevor Sie mit der nächsten beginnen. Sie können den Code jedoch in selbstausführende Funktionen umwandeln und die Zeit für eine reibungslose Ausgabe im Browser etwas verkürzen, bevor Sie die nächste Zeile drucken.

Und wenn Sie solche großen Schleifen erstellen, sollten Sie wirklich auf Ihren Code achten. Es ist keine gute Idee, jQuery das #log Div in jeder Schleife erneut suchen zu lassen. Mach es einfach einmal vor den Loops. Und verwenden Sie kein Array für diese einfachen Zeichenfolgenoperationen. Dies verlangsamt es noch mehr.

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.