JavaScript-Callback

"Ich werde später zurückrufen!"

Ein Callback (callback) ist eine Funktion, die als Parameter an eine andere Funktion übergeben wird

Diese Technik ermöglicht es einer Funktion, eine andere Funktion aufzurufen

Callback-Funktionen können nach Abschluss einer anderen Funktion ausgeführt werden

Funktionsserie

JavaScript-Funktionen werden in der Reihenfolge ausgeführt, in der sie aufgerufen werden, nicht in der Reihenfolge, in der sie definiert wurden.

Dieser Beispiel zeigt schließlich "Goodbye":

Beispiel

function myFirst() {
  myDisplayer("Hello");
}
function mySecond() {
  myDisplayer("Goodbye");
}
myFirst();
mySecond();

Versuchen Sie es selbst

Dieser Beispiel zeigt schließlich "Hello":

Beispiel

function myFirst() {
  myDisplayer("Hello");
}
function mySecond() {
  myDisplayer("Goodbye");
}
mySecond();
myFirst();

Versuchen Sie es selbst

Reihenfolge der Ausführung

Manchmal möchten Sie besser steuern, wann eine Funktion ausgeführt wird.

Angenommen, Sie möchten berechnen und das Ergebnis anzeigen.

myCalculator,myDisplayer“)，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);

Versuchen Sie es selbst

myCalculator,myDisplayer):

Beispiel

function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}
function myCalculator(num1, num2) {
  let sum = num1 + num2;
  myDisplayer(sum);
}
myCalculator(5, 5);

Versuchen Sie es selbst

Das Problem im ersten Beispiel ist, dass Sie zwei Funktionen aufrufen müssen, um das Ergebnis anzuzeigen.

Das Problem im zweiten Beispiel ist, dass Sie den Anzeigefunktion des Rechners nicht stoppen können.

Es ist an der Zeit, ein Callback einzuführen.

JavaScript-Callback

Ein Callback ist eine Funktion, die als Parameter an eine andere Funktion übergeben wird.

Mit dem Callback können Sie die Funktion des Rechners durch den Callback aufrufen (myCalculator

Beispiel

function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}
function myCalculator(num1, num2, myCallback) {
  let sum = num1 + num2;
  myCallback(sum);
}
myCalculator(5, 5, myDisplayer);

Versuchen Sie es selbst

Im obigen Beispiel ist myDisplayer ist der Name der Funktion.

wird als Parameter übergeben myCalculator().

Denken Sie daran, keine Klammern zu verwenden, wenn Sie eine Funktion als Parameter übergeben.

Richtig: myCalculator(5, 5, myDisplayer);

Fehler: myCalculator(5, 5, myDisplayer());

Wann sollte ein Callback verwendet werden?

Der obige Beispiel ist nicht sehr aufregend.

Sie sind vereinfacht, um Ihnen die Syntax der Callbacks zu erklären.

Die wahre Glanzzeit der Callbacks sind asynchrone Funktionen, bei denen eine Funktion auf eine andere wartet (z.B. auf das Laden einer Datei).

Das nächste Kapitel wird asynchrone Funktionen vorstellen.