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.