Asynchronen Ablauf verstehen

[samid]

Hallo zusammen,

ich weiß nicht ob der Titel des Themas für dieses Problem zutrifft, aber ich habe das folgende Problem.... wenn ich diese Code ausführe:

<script type="text/javascript">
        function pruefen() {
          var f = document.Fragebogen;

          //Pruefverfahren
          while (f.elements["Vorname"].value == "") {
            var vorname = "Erstens";
            bootbox.prompt("Bitte Vornamen eingeben", function(result) {vorname += result;});
            console.log(vorname);
            ......
          }
        }
    </script>

Diese Funktion wird einem Formular zugestellt und sollte folgendes machen ... wenn ich auf den Submit Button drücke sollte dieses Script prüfen ob das Feld mit dem Namen eingegeben ist oder nicht. Im Falle dessen, wenn das Feld leer ist, sollte sich ein Bootstrap Modal Window öffnen und einen Wert anfordern. Das Problem ist aber, dass nach dem Aufruf des Bootstrap Modal Window gleich "console.log(vorname);" ausgeführt wird, ohne dabei auf den Rückgabewert von dem modalen Fenster zu warten. Aus diesem Grund wird als Ergebnis des "console.log(vorname)" nur der String "Erstens" ausgegeben. Kann mir jemand erklären wie das sein kann.
Danke und Gruß
Samid

 

[mikdoe]

In JS arbeitet man mit Eventhandlern, nicht mit Endlosschleifen wie while (f.elements["Vorname"].value == ""). Das heißt, du registrierst an das onsubmit Event im Formular den gewünschten Code. Zu "JS Formularprüfung" müsste es hier im Forum und in Google 3 Milliarden und noch mehr Fundstellen geben.

 

[samid]

Das ist mir ja alles klar. Könnt ja sein, dass dieser Codeschnipsel so nicht einsetzbar wäre. Mir geht es hier aber um das Verständnis wie Javascript den Code abarbeitet.

 

[mikdoe]

Aber das hast du doch schon selbst erkannt. bootbox.prompt scheint länger zu brauchen als console.log. Wenn das eine auf das andere warten soll musst du das als callback formulieren. Hat die Funktion bootbox.prompt keinen callback Parameter? Doch, laut Bootbox.js—alert, confirm and flexible modal dialogs for the Bootstrap framework ist doch der zweite der callback. Also versuch es doch mal so:

bootbox.prompt("Bitte Vornamen eingeben", function(result) {
   vorname += result;
   console.log(vorname);
});

Aber das while da drum herum bleibt trotzdem grundfalsch sowohl strategisch wie inhaltlich!

 

[samid]

Das nächste Mal kopiere ich die Schleife am besten nicht mit ;-). Ok gut, soweit war ich auch schon, dass ich das console.log() in die callback Funktion einsetzte, aber genau das möchte ich nicht! Ich frage mich nur, wieso das Programm nicht anhält und wartet bis die callback Funktion die Variable vorname abändert und dann mit dem console.log weitermacht. Ich möchte verstehen wie ich äußere Variablen mit callback Funktionen verändere und diese dann den anderen Funktionen zur Verfügung stelle.

 

[tsseh]

Das nächste Mal kopiere ich die Schleife am besten nicht mit ;-).

dann könnte dich aber niemand auf den fehler hinweisen

Ok gut, soweit war ich auch schon, dass ich das console.log() in die callback Funktion einsetzte, aber genau das möchte ich nicht!

aber nur so geht es

Ich frage mich nur, wieso das Programm nicht anhält und wartet bis die callback Funktion die Variable vorname abändert und dann mit dem console.log weitermacht.

weil js nicht anhält. js hat idR nur einen thread und arbeitet deinen code sequentiell ab. angefangen mit dem globalen code im 1. script, dann den des 2. bis hin zum letzten.
dann kommen bei entsprechenden events die eventhandler, falls vorher welche für das event registriert wurden. diese werden auch sequentiel eines nach dem anderem abgearbeitet.
der code

var vorname = "Erstens";
bootbox.prompt("Bitte Vornamen eingeben", function(result) {vorname += result;});
console.log(vorname);

macht vermutlich folgendes
* eine variable vorname mit wert "Erstens" wird angelegt.
* es wird eine textnode mit inhalt "Bitte Vornamen eingeben" ins dom eingefügt
* es wird ein textfeld ins dom eingefügt
* es wird ein button "ok" oder ähnliches eingefügt
* an dem button wird der klick-eventhandler function(result) {vorname += result;} registriert
* in der konsole wird der inhalt der variablen vorname ausgegeben
* jetzt ist dieser code abgearbeitet.
* jetzt wird sieht der Browser nach, ob weiterer code aus eventhandlern schon auf abarbeitung wartet
* wenn ja, wird er ausgeführt
~ eine unbestimmte zeit vergeht
# jetzt gibt der user etwas in das textfeld ein
~ eine unbestimmte zeit vergeht
# er drückt auf den ok-button
* der browser führt den evanthandler aus und fügt der globalen vorname den wert der variablen result zu
~ eine unbestimmte zeit vergeht

Ich möchte verstehen wie ich äußere Variablen mit callback Funktionen verändere und diese dann den anderen Funktionen zur Verfügung stelle.

überhaupt nicht

 

[samid]

Vielen Dank für die kompetente Antwort. Genau das habe ich gebraucht.

Gruß
Samid