JavaScript Javascript: Ladezeiten, Timing und Ladebalken

[obilaner]

Hallo.

Ich habe ein etwas grösseres Projekt wo an einer Stelle Profile initialisiert werden sollen. Dies funktioniert durch eine Funktion init(), die mehrere andere Funktionen nacheinander aufrufen soll, ua. container generieren, mit css überziehen, nachbearbeitung (css von bestimmten klassen abändern in einer schleife) sowie profilseite 1 der generierten dynamisch vielen Seiten laden.

Jetzt ist es so das Javascript bereits bevor alle anderen aufgaben wie dateien lesen, parsen, senden, applizieren bereits fertig ist mit dem Java code und deswegen die letzte funktion irgendwo zwischen Funktion 2 und 3 von 6 aufruft, wodurch sie nicht mehr funktioniert.

Als Workaround habe ich die Funktionen die eigentlich untereinander in einer Funktion geladen werden sollen wie bei einer Kette jeweils am Ende der vorigen Funktion innerhalb der Funktion aufgerufen. Das ist aber nur ein Workaround. ich dachte an sowas wie eine Art Ladebalken und einen Listener. Quasi das jede Funktion wenn sie durchgelaufen ist eine variable verändert und das ein listener dann wenn alle funktionen geladen sind die finale funktion lädt.

Leider funktioniert das nicht, soetwas maschinell abhören oder verändern zu lassen, so zumindest meine 'recherchen' / Chatgpt.
Ein weiterer Workaround zuerst ein Lade-gif zu laden vor dem code und dann nach zb 500-1000ms die Seite zu öffnen sieht zwar cool aus, aber es ist pfusch und funktioniert trotzdem nicht richtig. Drum die verkettung der aufrufe.

Was könnt ihr mir über dieses Thema sagen?

Ich akzeptiere auch Philosophisches und Erfahrungen.
Was würdet ihr machen / wie würdet ihr das machen?
Was ist vieleicht ein gutes Thema zum detaillierten einlesen?

 

[BeBur]

JS wird von Haus aus asynchron ausgeführt. Stichworte zum einlesen sind synchronous oder promise.

 

[tollertyp]

Jetzt ist es so das Javascript bereits bevor alle anderen aufgaben wie dateien lesen, parsen, senden, applizieren bereits fertig ist mit dem Java code und deswegen die letzte funktion irgendwo zwischen Funktion 2 und 3 von 6 aufruft, wodurch sie nicht mehr funktioniert.

Mit diesem Absatz kann ich irgendwie nichts anfangen.

 

[BeBur]

@tollertyp Ich bin mir halbwegs sicher, dass er will, dass gewisse Funktionen in einer bestimmten Reihenfolge ausgeführt werden.

 

[tollertyp]

JS wird von Haus aus asynchron ausgeführt.

asynchron zu was?

Funktionen, die ich aus einer init() aufrufe, werden synchron aufgerufen.
Ich verstehe deshalb nur Bahnhof, weil "dateien lesen, parsen, senden, applizieren" für mich klingt, als würde das via JS passieren. Von wo aus? Von den 6 Funktionen?

 

[SheepShaver]

Lässt sich alles mit async…await lösen.
Oder wer aus irgend einem Grund auf ES5 angewiesen ist, mit Promise Chains.