Eine kurze Analyse der Anwendung der JavaScript -Rückruffunktion

1. Definition der Rückruffunktion

Eine Rückruffunktion ist eine Funktion, die über einen Funktionszeiger aufgerufen wird. Wenn Sie den Zeiger (Adresse) der Funktion als Argument an eine andere Funktion übergeben. Wenn dieser Zeiger die Funktion aufruft, auf die sie verweist, sagen wir, dass dies eine Rückruffunktion ist. Die Rückruffunktion wird vom Implementierer der Funktion nicht direkt aufgerufen, sondern von einer anderen Partei aufgerufen, wenn ein bestimmtes Ereignis oder eine bestimmte Bedingung auftritt, und wird verwendet, um auf das Ereignis oder die Bedingung zu reagieren.

In JavaScript ist die spezifische Definition der Rückruffunktion: Die Funktion A wird als Parameter (Funktionsreferenz) in eine andere Funktion B übergeben, und diese Funktion B führt Funktion A aus. Nehmen wir an, dass die Funktion A als Rückruffunktion bezeichnet wird. Wenn es keinen Namen gibt (Funktionsausdruck), wird es als anonyme Rückruffunktion bezeichnet. Daher wird Rückruf nicht unbedingt für Asynchronität verwendet. Rückrufe werden häufig in allgemeinen synchronen (Blockier-) Szenarien verwendet, beispielsweise in der Ausführung einiger Vorgänge und der Rückruffunktion wird ausgeführt.

Beispiel

Ein Beispiel für die Verwendung von Callbacks in Synchronisierung (Blockierung) ist die Ausführung von Func2, nachdem der Func1 -Code ausgeführt wurde.

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

2. Verwenden Sie Anlässe der Rückruffunktion

Ressourcenbeladen: Führen Sie den Rückruf nach dynamischem Laden von JS -Dateien aus, führen Sie den Rückruf nach dem Laden von IFrame aus, führen Sie den Rückruf nach dem Laden von AJAX -Vorgängen aus, führen Sie den Rückruf nach dem Laden des Bildes, AJAX usw. aus, usw.

DOM-Ereignisse und Node.js-Ereignisse basieren auf dem Rückrufmechanismus (Node.js-Rückrufe haben möglicherweise mehrschichtige Rückrufprobleme).

Die Verzögerungszeit von SetTimeout beträgt 0. Dieser Hack wird häufig verwendet. Die von SetTimeOut genannte Funktion ist eigentlich eine Rückrufausführungsausführungsform

Kettenaufruf: Wenn Kettenaufruf, ist es einfach, den Kettenaufruf in der Setzermethode (Setter) (oder in Methoden, die keine Werte zurückgeben) zu implementieren, aber der Wert Getter ist relativ schwer zu implementieren, da der Wert Getter die benötigten Daten anstelle dieses Zeigers zurückgibt. Wenn Sie die Kettenmethode implementieren möchten, können Sie eine Rückruffunktion verwenden, um sie zu implementieren.

Die Funktionsaufrufe von SetTimeout und SetInterval erhalten ihren Rückgabewert. Da beide Funktionen asynchron sind, dh ihr Anrufzeitpunkt und der Hauptprozess des Programms sind relativ unabhängig, gibt es keine Möglichkeit, auf ihren Rückkehrwert im Körper zu warten, und das Programm wird nicht anhalten und warten, wenn sie geöffnet werden, andernfalls geht die Bedeutung von SetTimeout und SetInterval verloren. Daher ist es bedeutungslos, die Rückgabe zu verwenden, sodass nur Rückruf verwendet werden kann. Die Bedeutung des Rückrufs besteht darin, die Proxy -Funktion der Timer -Ausführungsergebnisse für die rechtzeitige Verarbeitung zu benachrichtigen.

3. 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 in der Tat Objekte. Um genau zu sein, ist eine Funktion ein Funktionsobjekt, das mit dem Function () -Konstruktor erstellt wurde. Das Funktionsobjekt enthält eine Zeichenfolge, die den JavaScript -Code der Funktion enthält. Wenn Sie von C oder Java übertragen wurden, könnte dies seltsam erscheinen, wie könnte der Code eine Zeichenfolge sein? Für JavaScript ist dies jedoch ziemlich häufig. Der Unterschied zwischen Daten und Code ist vage.

 // Die Funktion kann auf diese Weise erstellt werden. // 6

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

Übertragungsfunktion als Rückruf

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

 Funktion fn (arg1, arg2, callback) {var num = math.ceil (math.random () * (arg1 - arg2) + arg2); Callback (num); // Übergeben Sie das Ergebnis} fn (10, 20, Funktion (num) {console.log ("Rückruf genannt! num:" + num);}); // Das Ergebnis ist eine Zufallszahl zwischen 10 und 20

Vielleicht scheint dies umständlich und sogar ein bisschen dumm zu sein. Warum nicht das Ergebnis abnormal zurückgeben? Aber wenn Sie eine Rückruffunktion verwenden müssen, denken Sie vielleicht nicht!

Machen Sie sich nicht in den Weg

Traditionelle Funktionen geben Daten als Parameter ein und verwenden Rückgabeanweisungen, um Werte zurückzugeben. Theoretisch gibt es am Ende der Funktion eine Return -Return -Anweisung, die strukturiert ist: ein Eingangspunkt und ein Ausgangspunkt. Dies ist einfacher zu verstehen. Funktionen sind im Wesentlichen den Implementierungsprozess zwischen Eingabe und Ausgabe abgebildet.

Wenn der Implementierungsprozess der Funktion jedoch sehr lang ist, sollten Sie darauf warten, dass die Funktion die Verarbeitung abgeschlossen hat, oder die Rückruffunktion verwenden, um eine asynchrone Verarbeitung durchzuführen? In diesem Fall wird die Verwendung von Rückruffunktionen kritisch, wie z. B.: AJAX -Anfrage. Wenn Sie eine Rückruffunktion für die Verarbeitung verwenden, kann der Code weiterhin andere Aufgaben ausführen, ohne ihn zu entleeren. In der tatsächlichen Entwicklung werden asynchrone Anrufe häufig in JavaScript verwendet, und es wird hier sogar sehr empfohlen!

Im Folgenden finden Sie ein umfassenderes Beispiel für das Laden von XML -Dateien mit AJAX und mithilfe der Funktion call (), um die Rückruffunktion im Kontext des angeforderten Objekts aufzurufen.

 Funktion fn (URL, Rückruf) {var httprequest; // xhr httprequest = window.xmlhttprequest erstellen? NEUE XMLHTTPREQUEST (): Window.ActiveXObject? NEU ActiveXObject ("microsoft.xmlhttp"): undefined; // Funktionale Erkennung für IE httprequest.onReadyStatechange = function () {if (httprequest.readystate === 4 && httprequest.status === 200) {/ // status callback.call (httprequest.responsexml); }}; httprequest.open ("get", url); httprequest.send ();} fn ("text.xml", function () {// Aufrufen der Funktionskonsole.log (this); // Ausgabe nach dieser Anweisung}); console.log ("Dies wird vor dem obigen Rückruf ausgeführt."); // Diese Anweisung gibt zuerst aus

Unsere Anfragen nach asynchroner Verarbeitung bedeuten, dass wir ihnen bei der Anfrage anfangen, unsere Funktion aufzurufen, wenn sie fertig sind. In tatsächlichen Situationen muss der Event -Handler von OnReadyStatechange auch den Antragsfehler berücksichtigen. Hier gehen wir davon aus, dass die XML -Datei existiert und vom Browser erfolgreich geladen werden kann. In diesem Beispiel wird die asynchrone Funktion dem OnReadyStatechange -Ereignis zugeordnet und daher nicht sofort ausgeführt.

Schließlich wird zuerst die Anweisung der zweiten Konsole.log ausgeführt, da die Rückruffunktion erst ausgeführt wird, wenn die Anfrage abgeschlossen ist.

Das obige Beispiel ist nicht leicht zu verstehen. Schauen Sie sich also das folgende Beispiel an:

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

Die Funktion wird extern bezeichnet und kann weiterhin auf die Variable a zugreifen. Dies liegt alles daran, dass der Umfang in JavaScript lexikalisch ist. Funktionelle läuft im Bereich, der sie definiert (der Umfang im Foo im obigen Beispiel), und nicht im Bereich, in dem diese 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. Weil sein Umfang gespeichert wird, aber nur die zurückgegebene Funktion kann auf den gespeicherten Bereich zugreifen. Die Rückgabe einer eingebetteten anonymen Funktion ist die häufigste Methode, um Verschlüsse zu erzeugen.

Das obige dreht sich alles um diesen Artikel. Ich hoffe, dass es für alle hilfreich sein wird, JavaScript -Programme zu lernen.