#12: Callback-Funktionen

Jedermanns Liebling: Zeit für ein Konzeptvideo! Callbacks sind ein wichtiges Konzept in JavaScript. Es sind Funktionen, die aufgerufen werden, wenn eine Aktion abgeschlossen ist. Sie verleihen unserem Code Struktur und Timing.

Nehmen wir zum Beispiel die Animation, die wir im letzten Video verwendet haben. Animationen brauchen Zeit, um ausgeführt zu werden. Was, wenn Sie möchten, dass etwas anderes passiert, sobald diese Animation beendet ist? Müssen Sie `setTimeout` für die gleiche Dauer wie die Animation verwenden? Nein. jQuery bietet uns Callback-Funktionen, die genau zu diesem Zweck verwendet werden.

Sie sind typischerweise ein zusätzlicher Parameter, den wir an die Methode übergeben. Im Fall von Animationen übergeben wir eine Funktion als letzten Parameter. Das ist die Callback-Funktion und sie wird aufgerufen, wenn die Animation abgeschlossen ist.

$("#element").animate({
  // stuff to animate
}, function() {
  // callback function
});

Das sieht vielleicht etwas seltsam aus, aber im Wesentlichen machen wir Folgendes:

.animate(a, b)

Wobei `a` ein Objekt von Eigenschaften und Werten ist und `b` eine Callback-Funktion.

Aber wir wissen aus dem letzten Video, dass Animationen auch einen Timing-Parameter annehmen können, der angibt, wie lange eine Animation dauern wird. Wo geht das hin? Das ist ein *optionaler* Parameter, genauso wie die Callback-Funktion. Wenn wir ihn verwenden wollten, würden wir ihn genau in die Mitte setzen, also im Grunde:

.animate(propertiesObject, duration, callback);

Und es gibt noch einen optionalen Parameter, einen String, den wir übergeben können, um einen Easing-Wert anzugeben.

.animate(propertiesObject, duration, easing, callback);

jQuery ist einfach cool und intelligent genug für diese optionalen Parameter. Wenn Sie die beiden mittleren auslassen und nur den Callback übergeben, kann es erkennen, dass Sie eine Funktion übergeben und keine Zahl oder einen String, also weiß es, dass Sie eine Callback-Funktion meinen. Sie müssen keine Platzhalterwerte oder Ähnliches übergeben. Das ist einfach gutes API-Design!

Wenn Sie die jQuery-Dokumentation lesen, zeigen sie es so an:

.animate( properties [, duration ] [, easing ] [, complete ] )

Direkt danach erklären sie die erwarteten Typen.

Aber zurück zu Callbacks. Sie können ziemlich verschachtelt werden. Stellen Sie sich vor, Sie setzen eine weitere Animation in die Callback-Funktion, und diese Animation hat ihre eigene Callback-Funktion. Das ist völlig in Ordnung, da Sie vielleicht eine mehrstufige Animation durchführen möchten. Sie müssen nur organisiert bleiben.

Siehe den Pen 450c5810be27a9a8946cb8012cbd1213 von Chris Coyier (@chriscoyier) auf CodePen

Wir verwenden hier nur Animation als Beispiel. Vielleicht ist eine noch häufigere Verwendung von Callback-Funktionen Ajax. Ajax ist, wenn der Browser eine andere Ressource abruft, ohne die Seite neu zu laden. Das kann eine völlig unbekannte Zeit dauern. Es hängt von der Bandbreite und Latenz und der Größe der Datei und Fehlerbedingungen und all diesen Dingen ab. Sie können wahrscheinlich nichts mit dieser Ajax-Anfrage tun, bis Sie etwas zurückbekommen oder anderweitig weitere Informationen erhalten. Callback-Funktionen sind perfekt dafür, und damit werden wir uns später beschäftigen.