Ja, das ist normal. Der Browser setzt eine Änderung am DOM erst durch Layouting und Painting um, wenn der aktuelle Call-Stack abgearbeitet ist und der JavaScript-Interpreter zur Ruhe kommt bzw. mit dem nächsten geplanten Funktionaufruf weitermacht. Stichwort »JavaScript Event Loop«. Sprich: Dein JavaScript muss zur Ruhe kommen.

Ja, setTimeout bzw. setImmediate ist eine Möglichkeit. Eine andere ist das Erzwingen des Renderings durch die Abfrage von offsetWidth oder einer anderen Eigenschaft, dessen Wert der Browser erst durch Layouting korrekt zurückliefern kann.

Das heißt also, ich muss in dem Script Pausen erzwingen, so dass das Script, wie du sagst, zur Ruhe kommt und Zeit bekommt, die Änderungen im Design vorzunehmen.

Nun aber die Frage dazu: Welche Funktionen müsste ich mittels settimeout() starten lassen? Meine Fortschritt_Anzeige() (oder in deinem Falle renderStatus()) oder die anderen Funktionen (one, two, three, ...)?

Das ist glaube ich dein 3. Thread mit ähnlichem Inhalt?! Das warst doch du, oder?
Du musst das einmal wirklich verstehen! Dann ist es ganz logisch/leicht.
Das Script muss zur Ruhe kommen ist vielleicht etwas missverständlich. Der Browser muß neu zeichnen/rendern. Das macht er aber nicht wenn gerade ein JS abgearbeitet wird.
Also musst du dein Script abschließen, den Browser rendern lassen und dann ein neues Stück JS starten.
Das musst du aber ja sowieso schon machen, da ein JS welches 1-2 Minuten läuft dich ständig daran erinnert, das es so nicht sein sollte!
Also musst du dein lang laufendes JS in mehrere kurze Teile aufteilen, die zwischendurch den Browser mal wieder was anderes machen lassen. Am Ende eines solchen Teils, kannst du deinen Fortschrittsbalken aktualisieren.

Das settimeout() dient doch nur dazu, eine Funktion nach einer gewissen Zeit starten zu lassen,

Genau!

aber in der Zeit wird doch keine "Pause" verursacht um das Script design-mäßig zu verändern oder?

In der Zwischenzeit zeichnet der Browser deine im Script vorgenommenen Änderungen am DOM auf den Bildschirm, nimmt Maus- und Tastaturevents entgegen und und und.

//--> Und wie bekomm ich aus den oben genannten Funktionen meine Werte zurück?
   //--> Weil vorher hatte ich es wie folgt:
   //    infile = function Excel_Tabelle_Laden( Ausgangswerte )
   //    infile = function Leere_Eintraege_Loeschen( infile )
   //    infile = function Daten_konvertieren( infile )
   //    ...
   //--> also die zurückgegebenen Werte wurden für die weiteren Funktionen benutzt

http://forum.de.selfhtml.org/archiv/2013/4/t213368/#m1458691

Du kannst dir auch ein Objekt basteln, welches die einzelnen Funktionen und deinen bisherigen Returnwert als Member hat, vielleicht liegt dir das eher.
Das Prinzip ist immer das gleiche, du musst die benötugten Werte irgendwo sichern für den nächsten Teilschritt.
Dazu kannst du von globalen Variablen über den Closed-Term einer Closure bis zu Membervariablen nutzen.

Hallo,

//--> Und wie bekomm ich aus den oben genannten Funktionen meine Werte zurück?
   //--> Weil vorher hatte ich es wie folgt:
   //    infile = function Excel_Tabelle_Laden( Ausgangswerte )
   //    infile = function Leere_Eintraege_Loeschen( infile )
   //    infile = function Daten_konvertieren( infile )
   //    ...
   //--> also die zurückgegebenen Werte wurden für die weiteren Funktionen benutzt

Indem die Daten von der einen Step-Funktion an die nächste weitergegeben werden. Das ist im Grunde nur cleveres herumreichen der Daten:
http://jsfiddle.net/molily/BfAVX/

Hier ist eine Closure nextStep hinzugekommen, die processQueue (vormals loop) mit den neuen Daten aufruft.

Das ginge natürlich auch mit Function.prototype.bind, technisch gesehen ist es dasselbe; bind erzeugt auch nur eine Closure.

Allerdings würde ich den objektorientierten Ansatz bevorzugen, wie unknown ihn vorgeschlagen hat. Mein Beispiel oben ist eher ein funktionaler – es gibt kein geteiltes Status-Objekt, sondern nur die Arbeitsdaten, und eine Step-Funktion braucht keine Seiteneffekte zu haben. Das ist sauber, aber weniger flexibel.

Mathias

Hallo,

Eine andere ist das Erzwingen des Renderings durch die Abfrage von offsetWidth oder einer anderen Eigenschaft, dessen Wert der Browser erst durch Layouting korrekt zurückliefern kann.

Sicher? Meiner Meinung nach wird dann nur das Layout zu diesem Zeitpunkt neu berechnet, aber nicht gezeichnet.

Wahrscheinlich hast du Recht, ein Reflow ist noch kein Repaint. Danke für den Hinweis.

Ich hätte besser auf requestAnimationFrame hinweisen sollen anstatt auf die oben genannten Hacks. RAF (hihi) ist explizit dazu gedacht, einen Repaint zu triggern und verhält sich ansonsten wie setTimeout hier im Thread benutzt wurde.

Mathias