Als JavaScript -Entwickler können Sie den größten Teil Ihrer Zeit damit verbringen, synchrone Anwendungen und Programme zu entwickeln. Einige spezifische Operationen können erst beginnen, wenn die vorherigen in solchen Anwendungen abgeschlossen sind. Wenn jedoch Daten von einer externen Quelle wie einer externen API angefordert werden, haben wir häufig keine Ahnung, wann die erforderlichen Daten zurückgegeben werden.

In solchen Fällen müssen Sie auf die Antwort warten, aber gleichzeitig möchten Sie nicht. Hinzufügen Rückruffunktionen sind in dieser Situation nützlich.

In diesem Artikel werden Rückruffunktionen in erläutert JQuery Mit Hilfe geeigneter Beispiele. So lass uns anfangen!

Rückruffunktionen in JQuery

Die in einem JavaScript -Programm hinzugefügten Aussagen werden nacheinander ausgeführt. Wenn Sie jedoch einen Effekt in JQuery nutzen, braucht es Zeit, um seine Funktionalität auszuführen. In der Zwischenzeit wird der in den nächsten Zeilen hinzugefügte Code ausgeführt. Um diese Situation zu vermeiden, bietet JQuery eine Rückruffunktion für jede JQuery -Effektmethode an.

Eine Rückruffunktion ist eine Art von JQuery -Funktion, die ausgeführt wird, wenn die Methode für hinzugefügte Effekte ihren Betrieb beendet. Diese Funktion wird als letztes Argument in der spezifischen JQuery -Effektmethode übergeben.

Schauen Sie sich nun die Syntax der Rückruffunktion in JQuery an.

Syntax von JQuery -Rückruffunktionen

$ (Selektor).Effect_Function (Geschwindigkeit, Rückruf);

In "Wähler„Sie können einen JQuery -Selektor für die Auswahl der erforderlichen HTML -Elemente und die“ hinzufügen “Effect_function ()"Ist eine jQuery -Effektmethode, bei der Sie ein Argument für" verabschieden müssen "Geschwindigkeit" Und "Ruf zurück”Funktion.

Beispiel 1: Verwenden von Callback -Funktionen in JQuery

Zunächst werden wir eine hinzufügen "Absatz ausblenden"Button und ein Absatz in unserer"Index.html" Datei:

Absatz ausblenden

Dies ist ein Absatz mit Beispieltext.

Im nächsten Schritt wechseln wir zu unserer JavaScript -Datei “Mein Projekt.JSUnd schreiben Sie den folgenden Code darin:

$ (Dokument).Ready (function ()
$ ("Button").klicken (function ()
$ ("P").hide ("langsam", function ()
Alert ("Der Absatz ist jetzt versteckt");
);
);
);

Wenn der Benutzer nun auf die “klickt“Absatz ausblenden"Schaltfläche", der JQuery Elementname -Selektor "$ ("P")"Wird das finden und bekommen"P”Oder Absatzelement und verstecken Sie es dann langsam vor der Webseite. Danach der Rückruf “Funktion()”Wird ausgeführt und zeigt im Browser ein Alarmbox an:

Hier ist ein GIF, das die Ausgabe unseres JavaScript -Programms demonstriert:

Falls Sie überprüfen möchten, wie das gleiche Programm ohne JQuery-Rückruffunktion funktioniert, fügen Sie den folgenden Code in Ihre JavaScript-Datei hinzu:

$ (Dokument).Ready (function ()
$ ("Button").klicken (function ()
$ ("P").verstecken (1000);
Alert ("Der Absatz ist jetzt versteckt");
);
);

Ohne eine Rückruffunktion hinzuzufügen, funktioniert der JavaScript -Interpreter wie folgt:

Beispiel 2: Verwenden von Callback -Funktionen in JQuery

In diesem Beispiel werden wir eine Rückruffunktion für “hinzufügen“SlidetoggleJQuery -Effekt. Vorher werden wir einen Absatz hinzufügen und einen “Klick mich" Taste:

Dies ist ein Beispielabsatz.

Klick mich

Danach werden wir den folgenden Code in unserem aufschreiben “Mein Projekt.JS" Datei:

$ (Dokument).Ready (function ()
$ ("Button").klicken (function ()
$ ("P").Slidetoggle ("langsam", function ()
ALERT ("Der Schaltkipperffekt ist jetzt abgeschlossen.");
);
);
);

Der oben gegebene Code gibt an, dass das Klicken auf die Schaltfläche langsam die “nach unten rutscht“P" Element. Wenn das "Slidetoggle ()"Effekte -Finishes, die Rückruffunktion wird ausgeführt, und auf der Webseite wird ein Alarmfeld angezeigt, in dem angegeben ist"Der Dia -Toggle -Effekt ist jetzt abgeschlossen”:

Schauen Sie sich die Ausgabe des bereitgestellten Programms an:

Jetzt im selben “Index.html"Datei, wir werden eine Überschrift mit dem" hinzufügen "

" Schild:

Das übergeht

Als nächstes der Elementnamenwähltektor $ ("H1, P") In der JavaScript -Datei finden und erhalten Sie die H1 Und P Elemente. Dann wird der Absatz mit “nach unten gerutscht“langsamGeschwindigkeit und Überschrift werden in seiner Position gezeigt. Zuletzt wird in der Rückruffunktion das Alarmfeld im Browser angezeigt:

$ (Dokument).Ready (function ()
$ ("Button").klicken (function ()
$ ("H1, P").Slidetoggle ("langsam", function ()
ALERT ("Der Dia -Toggle -Effekt hat abgeschlossen.");
);
);
);

Jetzt wird das Alarmbox zweimal auf der Webseite angezeigt, eines für die “H1"Übergang und der andere für die"PAbsatzelement:

Wie Sie aus der oben gegebenen Ausgabe erkennen können, haben wir die Rückruffunktion in jQuery erfolgreich implementiert.

Abschluss

Die Rückruffunktion in JQuery ist eine Funktion, die ausgeführt wird, wenn die hinzugefügte Effektmethode ihre Ausführung beendet hat. In einer Jquery -Effekt -Methode wird die Rückruffunktion übergeben, um später zurückgerufen zu werden und normalerweise als das letzte Argument angegeben. In diesem Artikel wurden Rückruffunktionen in JQuery erläutert und wir haben auch geeignete Beispiele zur Verwendung von Rückruffunktionen geliefert.