Wenn ich diese Funktionen nacheinander aufrufen muss,
$('#art1').animate({'width':'1000px'},1000);
$('#art2').animate({'width':'1000px'},1000);
$('#art3').animate({'width':'1000px'},1000);
Ich weiß, dass ich in jQuery so etwas tun kann:
$('#art1').animate({'width':'1000px'},1000,'linear',function(){
$('#art2').animate({'width':'1000px'},1000,'linear',function(){
$('#art3').animate({'width':'1000px'},1000);
});
});
Nehmen wir jedoch an, dass ich jQuery nicht verwende und Folgendes aufrufen möchte:
some_3secs_function(some_value);
some_5secs_function(some_value);
some_8secs_function(some_value);
Wie soll ich diese Funktionen aufrufen, um sie auszuführen some_3secs_function
, und NACH Beendigung dieses Aufrufs, dann ausführen some_5secs_function
und NACH Beendigung dieses Aufrufs, dann aufrufen some_8secs_function
?
AKTUALISIEREN:
Das funktioniert immer noch nicht:
(function(callback){
$('#art1').animate({'width':'1000px'},1000);
callback();
})((function(callback2){
$('#art2').animate({'width':'1000px'},1000);
callback2();
})(function(){
$('#art3').animate({'width':'1000px'},1000);
}));
Drei Animationen beginnen gleichzeitig
Wo ist mein Fehler?
Antworten:
In Javascript gibt es synchrone und asynchrone Funktionen.
Synchrone Funktionen
Die meisten Funktionen in Javascript sind synchron. Wenn Sie mehrere synchrone Funktionen hintereinander aufrufen würden
Sie werden in der richtigen Reihenfolge ausgeführt.
doSomethingElse
wird nicht gestartet, bisdoSomething
abgeschlossen ist.doSomethingUsefulThisTime
wird wiederum erst nach Abschluss gestartetdoSomethingElse
.Asynchrone Funktionen
Die asynchrone Funktion wartet jedoch nicht aufeinander. Schauen wir uns das gleiche Codebeispiel an, das wir oben hatten, diesmal unter der Annahme, dass die Funktionen asynchron sind
Die Funktionen werden der Reihe nach initialisiert, aber alle werden ungefähr zur gleichen Zeit ausgeführt. Sie können nicht konsequent vorhersagen, welches zuerst beendet wird: Dasjenige, dessen Ausführung die kürzeste Zeit in Anspruch nimmt, wird zuerst beendet.
Manchmal möchten Sie jedoch, dass asynchrone Funktionen der Reihe nach ausgeführt werden, und manchmal möchten Sie, dass synchrone Funktionen asynchron ausgeführt werden. Glücklicherweise ist dies mit Rückrufen bzw. Zeitüberschreitungen möglich.
Rückrufe
Nehmen wir an , dass wir drei asynchrone Funktionen haben , dass wir , um ausführen wollen,
some_3secs_function
,some_5secs_function
, undsome_8secs_function
.Da Funktionen in Javascript als Argumente übergeben werden können, können Sie eine Funktion als Rückruf übergeben, um sie nach Abschluss der Funktion auszuführen.
Wenn wir die Funktionen so erstellen
dann kannst du dann in der folgenden Reihenfolge anrufen:
Zeitüberschreitungen
In Javascript können Sie einer Funktion mitteilen, dass sie nach einer bestimmten Zeitüberschreitung (in Millisekunden) ausgeführt werden soll. Dies kann dazu führen, dass sich synchrone Funktionen asynchron verhalten.
Wenn wir drei synchrone Funktionen haben, können wir sie mit der
setTimeout
Funktion asynchron ausführen .Dies ist jedoch etwas hässlich und verstößt gegen das DRY-Prinzip [Wikipedia] . Wir könnten dies ein wenig bereinigen, indem wir eine Funktion erstellen, die ein Array von Funktionen und eine Zeitüberschreitung akzeptiert.
Dies kann so genannt werden:
Wenn Sie über asynchrone Funktionen verfügen, die Sie synchron ausführen möchten, verwenden Sie Rückrufe. Wenn Sie über synchrone Funktionen verfügen, die Sie asynchron ausführen möchten, verwenden Sie Timeouts.
quelle
Diese Antwort verwendet
promises
eine JavaScript-Funktion desECMAScript 6
Standards. Wenn Ihre Zielplattform dies nicht unterstütztpromises
, füllen Sie sie mit PromiseJs .Schauen Sie sich meine Antwort hier an. Warten Sie, bis eine Funktion mit Animationen fertig ist, bis Sie eine andere Funktion ausführen, wenn Sie
jQuery
Animationen verwenden möchten .So würde Ihr Code mit
ES6 Promises
und aussehenjQuery animations
.Es können auch normale Methoden eingeschlossen werden
Promises
.Die
then
Methode wird ausgeführt, sobald derPromise
Vorgang abgeschlossen ist. Normalerweise wird der Rückgabewert desfunction
übergebenen anthen
als Ergebnis an den nächsten übergeben.Wenn jedoch a
Promise
zurückgegeben wird,then
wartet die nächste Funktion bis zurPromise
Ausführung und empfängt die Ergebnisse (den Wert, an den übergeben wirdfulfill
).quelle
Es hört sich so an, als würden Sie den Unterschied zwischen synchroner und asynchroner Funktionsausführung nicht vollständig einschätzen .
Der Code, den Sie in Ihrem Update angegeben haben, führt sofort jede Ihrer Rückruffunktionen aus, wodurch wiederum sofort eine Animation gestartet wird. Die Animationen werden jedoch asynchron ausgeführt . Es funktioniert so:
setTimeout
mit einer Funktion auf, die den nächsten Animationsschritt und eine Verzögerung enthältsetTimeout
ausgeführt wirdDies wird fortgesetzt, bis der letzte Schritt in der Animation abgeschlossen ist. In der Zwischenzeit sind Ihre synchronen Funktionen längst abgeschlossen. Mit anderen Worten, Ihr Aufruf der
animate
Funktion dauert nicht wirklich 3 Sekunden. Der Effekt wird mit Verzögerungen und Rückrufen simuliert.Was Sie brauchen, ist eine Warteschlange . Intern stellt jQuery die Animationen in die Warteschlange und führt Ihren Rückruf erst aus, wenn die entsprechende Animation abgeschlossen ist. Wenn Ihr Rückruf dann eine andere Animation startet, werden diese nacheinander ausgeführt.
Im einfachsten Fall entspricht dies dem Folgenden:
Hier ist eine allgemeine asynchrone Schleifenfunktion. Es ruft die angegebenen Funktionen der Reihe nach auf und wartet jeweils auf die angegebene Anzahl von Sekunden.
Verwendung:
Sie können dies natürlich ändern, um konfigurierbare Wartezeiten in Anspruch zu nehmen oder die erste Funktion sofort auszuführen oder die Ausführung zu beenden, wenn eine Funktion in der Kette zurückkehrt
false
oder zuapply
den Funktionen in einem bestimmten Kontext oder was auch immer Sie sonst benötigen.quelle
Ich glaube, die asynchrone Bibliothek bietet Ihnen eine sehr elegante Möglichkeit, dies zu tun. Während es etwas schwierig sein kann, mit Versprechungen und Rückrufen zu jonglieren, kann Async saubere Muster liefern, um Ihren Denkprozess zu rationalisieren. Um Funktionen seriell auszuführen, müssten Sie sie in einen asynchronen Wasserfall stellen . Im asynchronen Jargon wird jede Funktion als a bezeichnet
task
, die einige Argumente und a benötigtcallback
. Das ist die nächste Funktion in der Sequenz. Die Grundstruktur würde ungefähr so aussehen:Ich habe gerade versucht, die Struktur hier kurz zu erklären. Lesen Sie den Wasserfallführer durch , um weitere Informationen zu erhalten. Er ist ziemlich gut geschrieben.
quelle
Ihre Funktionen sollten eine Rückruffunktion annehmen, die nach Abschluss aufgerufen wird.
dann wäre die Verwendung wie folgt:
quelle
Ich werde hier nicht auf setTimeout eingehen, aber:
quelle
Da Sie es mit Javascript markiert haben, würde ich eine Timer-Steuerung verwenden, da Ihre Funktionsnamen 3, 5 und 8 Sekunden sind. Starten Sie also Ihren Timer, 3 Sekunden in, rufen Sie den ersten an, 5 Sekunden in rufen Sie den zweiten an, 8 Sekunden in rufen Sie den dritten an, und stoppen Sie dann den Timer, wenn er fertig ist.
Normalerweise ist in Javascript das, was Sie haben, korrekt, da die Funktionen nacheinander ausgeführt werden. Da es jedoch so aussieht, als würden Sie versuchen, zeitgesteuerte Animationen zu erstellen, ist ein Timer die beste Wahl.
quelle
quelle
next
?Sie können Versprechen auch folgendermaßen verwenden:
Sie müssten
some_value
global machen, um von innerhalb der .then darauf zugreifen zu könnenAlternativ können Sie von der äußeren Funktion den Wert zurückgeben, den die innere Funktion verwenden würde, wie folgt:
quelle
Ich verwende eine 'waitUntil'-Funktion, die auf dem setTimeout von Javascript basiert
Dies würde perfekt funktionieren, wenn Ihre Funktionen eine bestimmte Bedingung auf true setzen, die Sie abfragen könnten. Außerdem gibt es Timeouts, die Ihnen Alternativen für den Fall bieten, dass Ihre Funktion etwas nicht erledigt hat (auch innerhalb des Zeitbereichs. Denken Sie an Benutzer-Feedback!).
z.B
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