JavaScript-Callbacks
"Ich werde später zurückrufen!"
Ein Callback ist eine Funktion, die als Argument an eine andere Funktion übergeben wird
Diese Technik ermöglicht es einer Funktion, eine andere Funktion aufzurufen
Eine Rückruffunktion kann ausgeführt werden, nachdem eine andere Funktion beendet wurde
Funktionsablauf
JavaScript-Funktionen werden in der Reihenfolge ausgeführt, in der sie aufgerufen werden. Nicht in der Reihenfolge, in der sie definiert sind.
In diesem Beispiel wird am Ende "Auf Wiedersehen" angezeigt:
Beispiel
function myFirst() {
myDisplayer("Hello");
}
function
mySecond() {
myDisplayer("Goodbye");
}
myFirst();
mySecond();
In diesem Beispiel wird am Ende "Hallo" angezeigt:
Beispiel
function myFirst() {
myDisplayer("Hello");
}
function
mySecond() {
myDisplayer("Goodbye");
}
mySecond();
myFirst();
Ablaufsteuerung
Manchmal möchten Sie eine bessere Kontrolle darüber haben, wann eine Funktion ausgeführt werden soll.
Angenommen, Sie möchten eine Berechnung durchführen und dann das Ergebnis anzeigen.
Sie könnten eine Taschenrechnerfunktion ( ) aufrufen myCalculator, das Ergebnis speichern und dann eine andere Funktion ( myDisplayer) aufrufen, um das Ergebnis anzuzeigen:
Beispiel
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
function myCalculator(num1, num2) {
let sum = num1 + num2;
return sum;
}
let result = myCalculator(5, 5);
myDisplayer(result);
Oder Sie könnten eine Taschenrechnerfunktion ( myCalculator) aufrufen und die Taschenrechnerfunktion die Anzeigefunktion ( myDisplayer) aufrufen lassen:
Beispiel
function myDisplayer(some) {
document.getElementById("demo").innerHTML
= some;
}
function myCalculator(num1, num2) {
let sum = num1 + num2;
myDisplayer(sum);
}
myCalculator(5, 5);
Das Problem mit dem ersten obigen Beispiel ist, dass Sie zwei Funktionen aufrufen müssen, um das Ergebnis anzuzeigen.
Das Problem mit dem zweiten Beispiel ist, dass Sie nicht verhindern können, dass die Taschenrechnerfunktion das Ergebnis anzeigt.
Jetzt ist es an der Zeit, einen Rückruf einzuleiten.
JavaScript-Callbacks
Ein Callback ist eine Funktion, die als Argument an eine andere Funktion übergeben wird.
Mit einem Callback könnten Sie die Taschenrechnerfunktion ( myCalculator) mit einem Callback aufrufen und die Taschenrechnerfunktion den Callback ausführen lassen, nachdem die Berechnung abgeschlossen ist:
Beispiel
function myDisplayer(some) {
document.getElementById("demo").innerHTML
= some;
}
function myCalculator(num1, num2, myCallback) {
let sum = num1 + num2;
myCallback(sum);
}
myCalculator(5, 5, myDisplayer);
Im obigen Beispiel myDisplayerist der Name einer Funktion.
Es wird myCalculator()als Argument übergeben.
Wenn Sie eine Funktion als Argument übergeben, denken Sie daran, keine Klammern zu verwenden.
Rechts: myCalculator(5, 5, myDisplayer);
Falsch: meinRechner(5, 5, meinDisplayer());
Wann sollte man einen Rückruf verwenden?
Die obigen Beispiele sind nicht sehr aufregend.
Sie sind vereinfacht, um Ihnen die Callback-Syntax beizubringen.
Wo Callbacks wirklich glänzen, sind asynchrone Funktionen, wo eine Funktion auf eine andere Funktion warten muss (wie das Warten auf das Laden einer Datei).
Asynchrone Funktionen werden im nächsten Kapitel behandelt.