Ich habe den folgenden JavaScript-Code:
$('a.button').click(function(){
if (condition == 'true'){
function1(someVariable);
function2(someOtherVariable);
}
else {
doThis(someVariable);
}
});
Wie kann ich sicherstellen, dass der function2
Aufruf erst nach function1
Abschluss erfolgt?
javascript
jquery
Rrryyyaaannn
quelle
quelle
function1
eine asynchrone Operation?Antworten:
Geben Sie einen anonymen Rückruf an und lassen Sie function1 ihn akzeptieren:
quelle
...do stuff
Dinge enthält, die asynchron sind? Function2 wird immer noch nicht ausgelöst, wenn dies erwartet wird. Das Beispiel in meinem obigen Kommentar zeigt, dass diefoo()
Funktion , da sie asynchronen Codebar()
enthält, ihren Inhalt nicht auslöst, nachdemfoo()
der Inhalt ausgeführt wurde, selbst wenn$.when().then()
sie nacheinander aufgerufen wird. Diese Antwort ist nur gültig, wenn (und nur wenn) alle Inhalte...do stuff
in Ihrem Code streng synchron sind.callBack()
nachdem alle n asynchronen Aufrufe ausgeführt wurden. Da OP nicht erwähnt hat, was er in der Funktion tut, wird davon ausgegangen, dass es sich um einen asynchronen Aufruf auf einer Ebene handelt.Wenn Sie jQuery 1.5 verwenden, können Sie das neue Deferreds-Muster verwenden:
Bearbeiten: Aktualisierter Blog-Link:
Rebecca Murphy hatte hier eine großartige Zusammenfassung: http://rmurphey.com/blog/2010/12/25/deferreds-coming-to-jquery/
quelle
$.when(function1).then(function2);
(ohne die Klammern, die die Funktion aufrufen)?function1
sollte ein Versprechen zurückgeben. In diesem Fall muss es sich um die tatsächlich ausgeführte Funktion handeln, nicht um die Referenz. Wennresolve
dieses Versprechen aufgerufen wird,function2
wird es ausgeführt. Dies lässt sich leicht erklären, wenn man davon ausgeht, dassfunction1
ein Ajax-Aufruf vorliegt. Derdone
Rückruf würde dann das Versprechen lösen. Ich hoffe das ist klar.Versuche dies :
quelle
Diese Antwort verwendet
promises
eine JavaScript-Funktion desECMAScript 6
Standards. Wenn Ihre Zielplattform dies nicht unterstütztpromises
, füllen Sie sie mit PromiseJs .Versprechen sind eine neue (und viel bessere) Möglichkeit, asynchrone Operationen in JavaScript zu handhaben:
Dies mag für dieses einfache Beispiel als erheblicher Aufwand erscheinen, für komplexeren Code ist es jedoch weitaus besser als die Verwendung von Rückrufen. Sie können mehrere asynchrone Aufrufe einfach mit mehreren
then
Anweisungen verketten:Sie können jQuery-Verzögerungen auch einfach umbrechen (die von
$.ajax
Aufrufen zurückgegeben werden):Wie @charlietfl feststellte, implementiert das
jqXHR
von zurückgegebene Objekt$.ajax()
diePromise
Schnittstelle. Es ist also eigentlich nicht notwendig, es in ein zu wickelnPromise
, es kann direkt verwendet werden:quelle
Promise.resolve
Das Einwickeln$.ajax
ist ein Anti-Muster, da es ein$.ajax
vielversprechendes VersprechenPromise
, es implementiert nur die Schnittstelle. Ich bin nicht sicher, wie es sich verhält, wenn ein RealPromise
an seinethen
Methode übergeben wird, oder was aPromise.all
tun würde, wenn ajqXHR
und aPromise
an ihn übergeben werden. Dafür muss ich weitere Tests durchführen. Aber danke für den Hinweis, ich werde ihn der Antwort hinzufügen!$.ajax.then
ist nicht neuOder Sie können ein benutzerdefiniertes Ereignis auslösen, wenn eine Funktion abgeschlossen ist, und es dann an das Dokument binden:
Mit dieser Methode kann die Funktion 'b' erst NACH der Funktion 'a' ausgeführt werden, da der Trigger nur vorhanden ist, wenn die Ausführung der Funktion a abgeschlossen ist.
quelle
Dies hängt davon ab, was function1 tut.
Wenn Funktion1 ein einfaches synchrones Javascript ausführt, z. B. das Aktualisieren eines Div-Werts oder ähnliches, wird Funktion2 nach Abschluss von Funktion1 ausgelöst.
Wenn function1 einen asynchronen Aufruf ausführt, z. B. einen AJAX-Aufruf, müssen Sie eine "Rückruf" -Methode erstellen (die meisten Ajax-APIs haben einen Rückruffunktionsparameter). Rufen Sie dann function2 im Rückruf auf. z.B:
quelle
Sie können es so machen
quelle
Wenn Methode 1 nach Methode 2, 3, 4 ausgeführt werden muss. Das folgende Codefragment kann die Lösung hierfür sein, indem das Objekt "Zurückgestellt" in JavaScript verwendet wird.
quelle
Wenn function1 eine Synchronisierungsfunktion ist, die Sie in eine asynchrone Funktion umwandeln möchten, da die Ausführung einige Zeit in Anspruch nimmt und Sie keine Kontrolle darüber haben, um einen Rückruf hinzuzufügen:
Die Ausgabe wird sein:
... und nach 2 Sekunden:
Dies funktioniert, weil durch das Aufrufen von window.setTimeout () der JS-Runtine-Taskschleife eine Aufgabe hinzugefügt wird, wie dies bei einem asynchronen Aufruf der Fall ist, und weil das Grundprinzip der "Run-to-Completion" der JS-Laufzeit sicherstellt, dass onClick () wird nie unterbrochen, bevor es endet.
Beachten Sie, dass dies so lustig wie der Code schwer zu verstehen sein mag ...
quelle