Detaillierte Erklärung der Javascript-Rückruffunktion_Grundkenntnisse

Callback-Funktionsdefinition

Die Rückruffunktion ist eine Funktion, die über einen Funktionszeiger aufgerufen wird. Wenn Sie einen Funktionszeiger (Adresse) als Parameter an eine andere Funktion übergeben und dieser Zeiger zum Aufrufen der Funktion verwendet wird, auf die er zeigt, sprechen wir von einer Callback-Funktion. Die Rückruffunktion wird nicht direkt vom Implementierer der Funktion aufgerufen, sondern von einer anderen Partei, wenn ein bestimmtes Ereignis oder eine bestimmte Bedingung eintritt, um auf das Ereignis oder die Bedingung zu reagieren.

In JavaScript lautet die spezifische Definition einer Rückruffunktion: 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. Daher wird Callback nicht unbedingt für die asynchrone Verwendung verwendet. Callback wird häufig in allgemeinen synchronen (blockierenden) Szenarien verwendet, z. B. wenn die Ausführung einer Callback-Funktion nach der Ausführung bestimmter Vorgänge erforderlich ist.

Beispiel
Ein Beispiel für die Verwendung von Rückrufen bei der Synchronisierung (Blockierung). Der Zweck besteht darin, func2 auszuführen, nachdem die Ausführung des func1-Codes abgeschlossen ist.

Code kopieren Der Code lautet wie folgt:

var func1=function(callback){
//etwas tun.
(callback && typeof(callback) === "function") && callback();
}
func1(func2);
var func2=function(){
}

Verwendungszwecke der Rückruffunktion
Laden von Ressourcen: Rückruf ausführen, nachdem JS-Dateien dynamisch geladen wurden, Rückruf ausführen, nachdem Iframe geladen wurde, Ajax-Operationsrückruf, Rückruf ausführen, nachdem das Laden des Bildes abgeschlossen ist, AJAX usw.

DOM-Ereignisse und Node.js-Ereignisse basieren auf dem Callback-Mechanismus (Node.js-Callbacks können Probleme mit der mehrschichtigen Callback-Verschachtelung haben).
Die Verzögerungszeit von setTimeout beträgt 0. Dieser Hack wird häufig verwendet. Die von settimeout aufgerufene Funktion ist tatsächlich die Verkörperung eines Rückrufs

Verkettete Aufrufe: Bei der Verkettung ist es einfach, verkettete Aufrufe in der Zuweisungsmethode (Setter) (oder in einer Methode, die selbst keinen Wert zurückgibt) zu implementieren, aber der Getter (Getter) ist relativ schwierig zu implementieren verkettete Aufrufe, da der Werter statt dieses Zeigers die benötigten Daten zurückgeben muss. Wenn Sie eine verkettete Methode implementieren möchten, können Sie diese mithilfe einer Rückruffunktion implementieren

Die Funktionsaufrufe von setTimeout und setInterval erhalten ihre Rückgabewerte. Da beide Funktionen asynchron sind, d Andernfalls geht die Bedeutung von setTimeout und setInterval verloren, sodass die Verwendung von return sinnlos ist und nur Callback verwendet werden kann. Die Bedeutung eines Rückrufs besteht darin, die Agentenfunktion über das Ergebnis der Timer-Ausführung zu informieren, damit sie rechtzeitig verarbeitet werden kann.

Funktionen sind auch Objekte

Wenn Sie die Rückruffunktion verstehen möchten, müssen Sie zunächst die Regeln der Funktion klar verstehen. In JavaScript sind Funktionen seltsam, aber sie sind tatsächlich Objekte. Genauer gesagt ist eine Funktion ein Funktionsobjekt, das mit dem Function()-Konstruktor erstellt wurde. Das Function-Objekt enthält eine Zeichenfolge, die den JavaScript-Code der Funktion enthält. Wenn Sie von C oder Java kommen, mag das seltsam erscheinen. Wie kann der Code eine Zeichenfolge sein? Bei Javascript ist dies jedoch an der Tagesordnung. Die Unterscheidung zwischen Daten und Code ist fließend.

Code kopieren Der Code lautet wie folgt:

//Sie können Funktionen wie diese erstellen
var fn = new Function("arg1", "arg2", "return arg1 * arg2;");
fn(2, 3); //6

Ein Vorteil dieser Vorgehensweise besteht darin, dass Sie Code an andere Funktionen oder reguläre Variablen oder Objekte übergeben können (da Code buchstäblich nur ein Objekt ist).

Übergabe der Funktion als Rückruf

Es ist einfach, eine Funktion als Parameter zu übergeben.
​

Code kopieren Der Code lautet wie folgt:

Funktion fn(arg1, arg2, Rückruf){
var num = Math.ceil(Math.random() * (arg1 - arg2) arg2);
​ callback(num);//Übertrage das Ergebnis
}

fn(10, 20, function(num){
console.log("Rückruf aufgerufen! Num: "
});//Das Ergebnis ist eine Zufallszahl zwischen 10 und 20

Vielleicht erscheint das umständlich oder sogar etwas dumm. Warum geben Sie die Ergebnisse nicht normal zurück? Aber wenn Sie eine Rückruffunktion verwenden müssen, denken Sie vielleicht nicht daran!

Gehen Sie uns aus dem Weg

Herkömmliche Funktionen geben Daten in Form von Parametern ein und verwenden Rückgabeanweisungen, um Werte zurückzugeben. Theoretisch gibt es am Ende der Funktion eine Return-Anweisung, die strukturell aus einem Eingabepunkt und einem Ausgabepunkt besteht. Dies ist einfacher zu verstehen. Eine Funktion ist im Wesentlichen eine Abbildung des Implementierungsprozesses zwischen Eingabe und Ausgabe.

Wenn der Funktionsimplementierungsprozess jedoch sehr lang ist, möchten Sie dann warten, bis die Funktion die Verarbeitung abgeschlossen hat, oder eine Rückruffunktion für die asynchrone Verarbeitung verwenden? In diesem Fall ist es wichtig, Callback-Funktionen zu verwenden, zum Beispiel: AJAX-Anfragen. Wenn Sie zur Verarbeitung eine Callback-Funktion verwenden, kann der Code weiterhin andere Aufgaben ausführen, ohne vergeblich warten zu müssen. In der tatsächlichen Entwicklung werden in JavaScript häufig asynchrone Aufrufe verwendet, und dies wird hier sogar dringend empfohlen!

Nachfolgend finden Sie ein umfassenderes Beispiel für die Verwendung von AJAX zum Laden einer XML-Datei und die Verwendung der Funktion call() zum Aufrufen der Rückruffunktion im Kontext des angeforderten Objekts.
​

Code kopieren Der Code lautet wie folgt:

Funktion fn(URL, Rückruf){
var httpRequest; //XHR erstellen
httpRequest = window.XMLHttpRequest ? new XMLHttpRequest() :　
　　 window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP"    ): undefiniert;//Funktionale Erkennung für IE
 
httpRequest.onreadystatechange = function(){
If(httpRequest.readystate === 4
​ ​ ​ ​ ​ ​ ​ ​​​​​ callback.call(httpRequest.responseXML);
}
};
httpRequest.open("GET", url);
httpRequest.send();
}
fn("text.xml", function(){　　 //Funktion aufrufen

console.log(this); //Ausgabe nach dieser Anweisung
});

console.log("dies wird vor dem obigen Rückruf ausgeführt."); //Diese Anweisung wird zuerst ausgegeben

Wir fordern eine asynchrone Verarbeitung an. Das heißt, wenn wir die Anfrage starten, weisen wir sie an, unsere Funktion aufzurufen, wenn sie abgeschlossen ist. In tatsächlichen Situationen muss der Ereignishandler onreadystatechange auch die Situation eines Anforderungsfehlers berücksichtigen. Hier gehen wir davon aus, dass die XML-Datei vorhanden ist und vom Browser erfolgreich geladen werden kann. In diesem Beispiel ist die asynchrone Funktion dem Ereignis onreadystatechange zugewiesen und wird daher nicht sofort ausgeführt.

Schließlich wird die zweite console.log-Anweisung zuerst ausgeführt, da die Rückruffunktion erst ausgeführt wird, wenn die Anforderung abgeschlossen ist.

Das obige Beispiel ist nicht leicht zu verstehen, schauen Sie sich also das folgende Beispiel an:

Code kopieren Der Code lautet wie folgt:

Funktion foo(){
var a = 10;
Rückgabefunktion(){
        a *= 2;
         return a;                                    };  
}
var f = foo();
f(); //return 20.
f(); //return 40.

Bei einem externen Aufruf der Funktion kann weiterhin auf die Variable a zugegriffen werden. Dies liegt daran, dass der Gültigkeitsbereich in JavaScript lexikalisch ist. Funktionen werden in dem Bereich ausgeführt, in dem sie definiert sind (der Bereich innerhalb von foo im obigen Beispiel), nicht in dem Bereich, in dem die Funktion ausgeführt wird. Solange f in foo definiert ist, kann es auf alle in foo definierten Variablen zugreifen, auch wenn die Ausführung von foo beendet ist. Da sein Bereich gespeichert wird, kann jedoch nur die zurückgegebene Funktion auf diesen gespeicherten Bereich zugreifen. Die Rückgabe einer verschachtelten anonymen Funktion ist die gebräuchlichste Methode zum Erstellen von Abschlüssen.