Detaillierte Erläuterung der Definition der Javascript-Rückruffunktion und Anwendungsbeispiele-js-Tutorial-php.cn

Die Callback-Funktion 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 von func1-Code abgeschlossen ist.

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

Nach dem Login kopieren

Verwendungszwecke der Rückruffunktion
Ressourcenladen: Rückruf nach dem dynamischen Laden der JS-Datei ausführen, Rückruf nach dem Laden des Iframes ausführen, Ajax-Operationsrückruf, Rückruf nach dem Laden des Bildes ausführen abgeschlossen, AJAX und so weiter.

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 ist 0. Dieser Hack wird häufig verwendet. Die von settimeout aufgerufene Funktion ist tatsächlich die Verkörperung eines Rückrufs: Während des Kettenaufrufs in der Zuweisungsmethode (Setter). Es ist einfach, verkettete Aufrufe in einer Methode (oder einer Methode, die selbst keinen Wert zurückgibt) zu implementieren, aber es ist relativ schwierig, verkettete Aufrufe mit einem Getter zu implementieren, da Sie stattdessen den Getter benötigen, um die benötigten Daten zurückzugeben Zeiger: Wenn Sie eine Kettenmethode implementieren möchten, können Sie Rückruffunktionen verwenden, um die Funktionsaufrufe

setTimeout und setInterval zu implementieren und deren Rückgabewerte abzurufen. Da beide Funktionen asynchron sind, das heißt, ihre Aufrufreihenfolge relativ unabhängig vom Hauptprozess des Programms ist, gibt es keine Möglichkeit, im Hauptteil auf ihre Rückgabewerte zu warten, und das Programm stoppt nicht und wartet, wenn sie es sind 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.

Funktion ist auch ein Objekt

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.

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

//可以这样创建函数
var fn = new Function("arg1", "arg2", "return arg1 * arg2;");
fn(2, 3);   //6

Nach dem Login kopieren

Übergabe einer Funktion als Callback

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

Vielleicht scheint das umständlich oder sogar etwas dumm zu sein. Aber wenn Sie eine Rückruffunktion verwenden müssen, denken Sie vielleicht nicht daran!

function fn(arg1, arg2, callback){
    var num = Math.ceil(Math.random() * (arg1 - arg2) + arg2);
    callback(num);//传递结果
}
fn(10, 20, function(num){
   console.log("Callback called! Num: " + num); 
});//结果为10和20之间的随机数

Nach dem Login kopieren

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.

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.

function fn(url, callback){
    var httpRequest;　　　　//创建XHR
    httpRequest = window.XMLHttpRequest ? new XMLHttpRequest() :　　　
　　　　    window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP"             ) : undefined;//针对IE进行功能性检测
    
    httpRequest.onreadystatechange = function(){
      if(httpRequest.readystate === 4 
                && httpRequest.status === 200){　　//状态判断
          callback.call(httpRequest.responseXML);  
       }
    };
    httpRequest.open("GET", url);
    httpRequest.send();
}
fn("text.xml", function(){　　　　//调用函数
   console.log(this); 　　//此语句后输出
});
console.log("this will run before the above callback.");　　//此语句先输出

Nach dem Login kopieren

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:

function foo(){
    var a = 10;
    return function(){
        a *= 2;
        return a;       
    };   
}
var f = foo();
f(); //return 20.
f(); //return 40.

Nach dem Login kopieren

　　函数在外部调用，依然可以访问变量a。这都是因为javascript中的作用域是词法性的。函数式运行在定义它们的作用域中（上述例子中的foo内部的作用域），而不是运行此函数的作用域中。只要f被定义在foo中，它就可以访问foo中定义的所有的变量，即便是foo的执行已经结束。因为它的作用域会被保存下来，但也只有返回的那个函数才可以访问这个保存下来的作用域。返回一个内嵌匿名函数是创建闭包最常用的手段。

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Definition der Javascript-Rückruffunktion und Anwendungsbeispiele. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!