Guten Tag liebes Forum
Vorstellung: Ich bastle gerade für meinen Chef ein Projekt zusammen. Bisher klappt alles wunderbar, doch ich habe ien kleines 'Schönheitsproblem'.
Bei einer gewissen Funktion werden drei verschiedene Ajax-Requests an den Server geschickt. Da die Ladezeiten dafür deutlich im wahrnehmbaren Bereich liegen wollte ich hier für etwa eine Sekunde eine Spinner-Ladegrafik einblenden. Sonst sieht der Aufbau der Seite merkwürdig aus und wirkt nicht besonders freundlich auf den Benutzer.
Programm: Bisher wollte ich das so lösen:
Ladegrafik(true);
Funktion1();
Funktion2();
Funktion3();
Ladegrafik(false);
Die Funktion Ladegrafik blendet bei true die Grafik ein, bei false wieder aus.
Problem: Anstatt abzuwarten, bis die drei Funktionen fertig sind wird die Grafik für ein nicht wahrnehmbare Zeit eingeblendet und sofort wieder ausgeblendet. Die anderen Funktionen benötigen danach noch etwas Zeit.
Frage: Wie kann ich dafür sorgen, dass auf jeden Fall erst die Funktionen beendet werden, bevor meine Grafik wieder ausgeblendet wird?
Ich arbeite übrigens mit jQuery, Google habe ich schon versucht, jedoch fällt mir leider weder ein brauchbarer Suchbegriff dazu ein noch finde ich etwas unter meinen unbrauchbaren ;). Danke im Vorraus!
Edit/Anmerkung: Ich habe es bereits mit folgendem Provisorium gelöst, finde ich jedoch sehr unschön und nicht gerade prozessorfreundlich..
Ich habe eine globale Variable 'Fortschritt', diese wird bei der ersten Aufgabe mit 25 addiert, nach der zweiten mit 25 und nach der dritten mit 50 (=100).
Zudem gibt es eine Funktion, die sich alle 50ms selbst aufruft, solange fortschritt < 100 ist, wenn nicht wird die Grafik ausgeblendet.
Da die fortschritt variable erst bei dem callback des ajax-requests addiert wird, funktioniert das n sich einwandfrei..jedoch unsauber und prozessorlastig.. Wäre echt schön, wenn jemand eine saubere Lösung hat.