Was ist eine Callback-Funktion in Javascript?

In JavaScript ist eine Callback-Funktion eine Funktion, die als Parameter übergeben wird. Funktion A wird als Parameter (Funktionsreferenz) an eine andere Funktion B übergeben und diese Funktion B führt Funktion A aus. Funktion A wird als Rückruffunktion bezeichnet. Wenn kein Name (Funktionsausdruck) vorhanden ist, wird sie als anonyme Rückruffunktion bezeichnet.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, JavaScript-Version 1.8.5, Dell G3-Computer.

Was ist eine Callback-Funktion?

In JavaScript sind Funktionen Objekte. Daher können Funktionen Funktionen als Parameter annehmen und von anderen Funktionen zurückgegeben werden. Funktionen, die dies tun, werden Funktionen höherer Ordnung genannt. Jede als Parameter übergebene Funktion wird als Callback-Funktion bezeichnet.

Die spezifische Definition der Rückruffunktion lautet: Funktion A wird als Parameter (Funktionsreferenz) an eine andere Funktion B übergeben, und diese Funktion B führt Funktion A aus. Nehmen wir einfach an, Funktion A wird als Callback-Funktion bezeichnet. Wenn kein Name (Funktionsausdruck) vorhanden ist, wird sie als anonyme Rückruffunktion bezeichnet.

Warum brauchen wir Rückrufe?

Aus einem sehr wichtigen Grund – JavaScript ist eine ereignisgesteuerte Sprache. Das bedeutet, dass das JavaScript nicht weiter auf eine Antwort wartet, sondern die Ausführung fortsetzt, während es auf andere Ereignisse wartet. Schauen wir uns ein einfaches Beispiel an:

function first(){
  console.log(1);
}
function second(){
  console.log(2);
}
first();
second();

Wie zu erwarten ist, wird zuerst die Funktion und dann die zweite Funktion ausgeführt, wobei Folgendes in der Konsole protokolliert wird:

// 1
// 2

So weit, so gut.

Was aber, wenn die Funktion Code enthält, der nicht sofort ausgeführt werden kann? Zum Beispiel eine API-Anfrage, bei der wir zuerst die Anfrage senden und dann auf die Antwort warten müssen? Um diese Aktion zu simulieren, wird setTimeout verwendet, eine JavaScript-Funktion, die nach einer festgelegten Zeit aufgerufen wird. Wir verzögern die Funktion um 500 Millisekunden, um eine API-Anfrage zu simulieren. Unser neuer Code wird so aussehen:

function first(){
  // Simulate a code delay
  setTimeout( function(){
    console.log(1);
  }, 500 );
}
function second(){
  console.log(2);
}
first();
second();

Es ​​ist jetzt nicht wichtig zu verstehen, wie setTimeout() funktioniert. Wichtig ist, dass wir console.log(1) innerhalb der 500-ms-Verzögerung verschoben haben. Was passiert also, wenn wir eine Funktion aufrufen?

first();
second();
// 2
// 1

Obwohl wir zuerst die Funktion first() aufgerufen haben, haben wir ihr Ergebnis nach der Funktion second() gedruckt.

Es ist nicht so, dass JavaScript unsere Funktionen nicht in der gewünschten Reihenfolge ausführt, sondern dass JavaScript nicht auf die Antwort von first() wartet, bevor es mit second() fortfährt.

Warum zeigst du das dann? Denn Sie können nicht eine Funktion nach der anderen aufrufen und erwarten, dass sie in der richtigen Reihenfolge ausgeführt wird. Mit Rückrufen kann sichergestellt werden, dass ein bestimmter Code erst dann ausgeführt wird, wenn die Ausführung eines anderen Codes abgeschlossen ist.

Erstellen Sie eine Rückruffunktion

Okay, ohne weitere Umschweife, erstellen wir einen Rückruf!

Öffnen Sie zunächst Ihre Chrome-Entwicklerkonsole (Windows: Strg + Umschalt + J) (Mac: Befehl + Wahl + J) und geben Sie die folgende Funktionsdeklaration in die Konsole ein:

function doHomework(subject) {
  alert(`Starting my ${subject} homework.`);
}

Jetzt fügen wir den Rückruf hinzu – als letzten Parameter In der Funktion doHomework() können wir den Rückruf übergeben. Definieren Sie dann die Rückruffunktion im zweiten Parameter des Aufrufs von doHomework().

function doHomework(subject, callback) {
  alert(`Starting my ${subject} homework.`);
  callback();
}

doHomework('math', function() {
  alert('Finished my homework');
});

Wie Sie sehen können, erhalten Sie zwei Benachrichtigungen, wenn Sie den obigen Code in die Konsole eingeben: die Benachrichtigung „Hausaufgaben beginnen“ und dann die Benachrichtigung „Hausaufgaben erledigt“.

Allerdings ist es nicht immer notwendig, Callback-Funktionen in unseren Funktionsaufrufen zu definieren. Sie können an anderer Stelle in unserem Code definiert werden, etwa so:

function doHomework(subject, callback) {
  alert(`Starting my ${subject} homework.`);
  callback();
}
function alertFinished(){
  alert('Finished my homework');
}
doHomework('math', alertFinished);

Das Ergebnis dieses Beispiels ist genau das gleiche wie das vorherige Beispiel, die Einstellungen unterscheiden sich jedoch geringfügig. Wir können sehen, dass wir während des Funktionsaufrufs doHomework() die Definition der Funktion „alertFinished“ als Parameter übergeben haben.

Ein echtes Beispiel

Wir versuchen, die API von Twitter aufzurufen. Wenn Sie eine Anfrage an eine API stellen, müssen Sie auf eine Antwort warten, bevor Sie auf diese Antwort reagieren können. Dies ist ein gutes Beispiel für einen echten Rückruf. Die Anfrage sieht so aus:

T.get('search/tweets', params, function(err, data, response) {
  if(!err){
    // This is where the magic will happen
  } else {
    console.log(err);
  }
})

T.get bedeutet, dass wir eine Get-Anfrage an Twitter senden

Diese Anfrage enthält drei Parameter: „search/tweets“ (das ist die Route unserer Anfrage), params (das ist unsere Suchparameter) und eine anonyme Funktion (die unser Rückruf ist).

Der Rückruf ist hier wichtig, da wir auf die Antwort vom Server warten müssen, bevor wir mit der Ausführung des Codes fortfahren können. Wir wissen nicht, ob unsere API-Anfrage erfolgreich sein wird, also warten wir, nachdem wir die Parameter über eine Get-Anfrage an search/tweets gesendet haben. Sobald Twitter antwortet, wird unsere Rückruffunktion aufgerufen. Twitter sendet uns ein Fehlerobjekt (Error) oder ein Antwortobjekt. Innerhalb der Rückruffunktion können wir eine if()-Anweisung verwenden, um festzustellen, ob unsere Anfrage erfolgreich war, und dann entsprechend auf die neuen Daten reagieren.

【Verwandte Empfehlungen: Javascript-Lern-Tutorial】

Das obige ist der detaillierte Inhalt vonWas ist eine Callback-Funktion in Javascript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!