Jedermanns Favorit: Konzeptvideozeit! Rückrufe sind ein wichtiges Konzept in JavaScript. Dies sind Funktionen, die aufgerufen werden, wenn eine Aktion ausgeführt wurde. Dann verleihen Sie unserem Code Struktur und Timing.
Nehmen Sie zum Beispiel die Animation, die wir im letzten Video verwendet haben. Animationen brauchen Zeit zum Laufen. Was ist, wenn nach Abschluss dieser Animation etwas anderes passieren soll? Müssen Sie eine setTimeoutfür die gleiche Länge wie die Animation machen? Nee. jQuery bietet uns Rückruffunktionen, die nur für diesen Zweck verwendet werden.
Sie sind normalerweise ein zusätzlicher Parameter, den wir an die Methode übergeben. Bei der Animation übergeben wir eine Funktion als letzten Parameter. Dies ist die Rückruffunktion und wird aufgerufen, wenn die Animation abgeschlossen ist.
$("#element").animate(( // stuff to animate ), function() ( // callback function ));Das sieht vielleicht ein bisschen funky aus, aber im Grunde machen wir nur:
.animate(a, b)Wo aist ein Objekt von Eigenschaften und Werten und bist eine Rückruffunktion.
Aus dem letzten Video wissen wir jedoch, dass die Animation auch einen Timing-Parameter annehmen kann, der angibt, wie lange eine Animation dauern wird. Wohin geht das? Dies ist ein optionaler Parameter, genau wie die Rückruffunktion. Wenn wir es verwenden wollten, würden wir es genau in die Mitte stellen, also im Wesentlichen:
.animate(propertiesObject, duration, callback);Und es gibt noch einen weiteren optionalen Parameter, eine Zeichenfolge, die wir übergeben können, um einen Beschleunigungswert anzugeben.
.animate(propertiesObject, duration, easing, callback);jQuery ist einfach cool und klug in Bezug auf diese optionalen Parameter. Wenn Sie die mittleren beiden weglassen und nur den Rückruf übergeben, kann dies erkennen, dass es sich bei der übergebenen Funktion um eine Funktion handelt, nicht um eine Zahl oder eine Zeichenfolge. Sie wissen also, dass Sie eine Rückruffunktion meinen. Sie müssen keine falschen Werte oder ähnliches übergeben. Das ist einfach gutes API-Design!
Wenn Sie sich die jQuery-Dokumentation ansehen, wird sie folgendermaßen angezeigt:
.animate (Eigenschaften (, Dauer) (, Lockerung) (, vollständig))
Dann gleich danach die erwarteten Typen erklären.
Aber trotzdem zurück zu Rückrufen. Sie können ziemlich verschachtelt werden. Stellen Sie sich vor, Sie fügen eine andere Animation in die Rückruffunktion ein, und diese Animation hat einen eigenen Rückruf. Das ist völlig vernünftig, da Sie möglicherweise eine mehrstufige Animation erstellen möchten. Sie müssen nur organisiert bleiben.
Siehe den Stift 450c5810be27a9a8946cb8012cbd1213 von Chris Coyier (@chriscoyier) auf CodePen
Wir verwenden hier nur die Animation als Beispiel. Möglicherweise ist Ajax eine noch häufigere Verwendung von Rückruffunktionen. Ajax ist, wenn der Browser nach einer anderen Ressource ruft, ohne die Seite zu aktualisieren. Das kann völlig unbekannt sein. Dies hängt von der Bandbreite und Latenz sowie der Größe der Datei und den Fehlerbedingungen und allen möglichen Dingen ab. Sie können mit dieser Ajax-Anfrage wahrscheinlich nichts anfangen, bis Sie etwas zurückbekommen oder auf andere Weise weitere Informationen erhalten. Callback-Funktionen sind dafür perfekt geeignet, und darauf werden wir später noch eingehen.