Was ist eine Rückruffunktion in JavaScript?

Dieser Artikel enthält eine kurze Einführung in das Konzept und die Verwendung von Rückruffunktionen in der Programmiersprache JavaScript.

Funktionen sind Objekte

Das erste, was wir wissen müssen, ist, dass Funktionen in Javascript erstklassige Objekte sind. Daher können wir mit ihnen genauso arbeiten wie mit anderen Objekten, z. B. indem wir sie Variablen zuweisen und sie als Argumente an andere Funktionen übergeben. Dies ist wichtig, da es die letztere Technik ist, mit der wir die Funktionalität in unseren Anwendungen erweitern können.

Rückruffunktionen

Eine Rückruffunktion ist eine Funktion, die als Argument an eine andere Funktion übergeben wird, um zu einem späteren Zeitpunkt „zurückgerufen“ zu werden. Eine Funktion , die andere Funktionen als Argumente nimmt eine genannte Funktion höherer Ordnung , die die Logik für enthält , wenn der Rückruf - Funktion ausgeführt wird. Es ist die Kombination dieser beiden, die es uns ermöglicht, unsere Funktionalität zu erweitern.

Beginnen wir mit einem einfachen Beispiel, um Rückrufe zu veranschaulichen:

function createQuote(quote, callback){ var myQuote = "Like I always say, " + quote; callback(myQuote); // 2 } function logQuote(quote){ console.log(quote); } createQuote("eat your vegetables!", logQuote); // 1 // Result in console: // Like I always say, eat your vegetables!

Im obigen Beispiel createQuoteist die Funktion höherer Ordnung, die zwei Argumente akzeptiert, wobei das zweite der Rückruf ist. Die logQuoteFunktion wird verwendet, um als unsere Rückruffunktion zu übergeben. Beachten Sie beim Ausführen der createQuoteFunktion (1) , dass wir keine Klammern anhängen , logQuotewenn wir sie als Argument übergeben. Dies liegt daran, dass wir unsere Rückruffunktion nicht sofort ausführen möchten, sondern lediglich die Funktionsdefinition an die Funktion höherer Ordnung weitergeben möchten, damit sie später ausgeführt werden kann.

Außerdem müssen wir sicherstellen, dass wir, wenn die von uns übergebene Rückruffunktion Argumente erwartet, diese Argumente bei der Ausführung des Rückrufs angeben (2) . Im obigen Beispiel wäre dies die callback(myQuote);Aussage, da wir wissen, dass logQuoteerwartet wird , dass ein Zitat übergeben wird.

Zusätzlich können wir anonyme Funktionen als Rückrufe übergeben. Der folgende Aufruf von createQuotehätte das gleiche Ergebnis wie das obige Beispiel:

createQuote("eat your vegetables!", function(quote){ console.log(quote); });

Nebenbei bemerkt, die Sie nicht haben , um das Wort „Rückruf“ als Namen für Ihr Argument zu verwenden, muss Javascript nur wissen , dass es der richtige Argument Name. Basierend auf dem obigen Beispiel verhält sich die folgende Funktion genauso.

function createQuote(quote, functionToCall) { var myQuote = "Like I always say, " + quote; functionToCall(myQuote); }

Warum Rückruffunktionen verwenden?

Meistens erstellen wir Programme und Anwendungen, die synchron arbeiten . Mit anderen Worten, einige unserer Operationen werden erst gestartet, nachdem die vorhergehenden abgeschlossen wurden. Wenn wir Daten aus anderen Quellen anfordern, z. B. einer externen API, wissen wir häufig nicht immer, wann unsere Daten zurückgesendet werden. In diesen Fällen möchten wir auf die Antwort warten, aber wir möchten nicht immer, dass unsere gesamte Anwendung zum Stillstand kommt, während unsere Daten abgerufen werden. In diesen Situationen sind Rückruffunktionen nützlich.

Schauen wir uns ein Beispiel an, das eine Anfrage an einen Server simuliert:

function serverRequest(query, callback){ setTimeout(function(){ var response = query + "full!"; callback(response); },5000); } function getResults(results){ console.log("Response from the server: " + results); } serverRequest("The glass is half ", getResults); // Result in console after 5 second delay: // Response from the server: The glass is half full!

Im obigen Beispiel stellen wir eine Scheinanforderung an einen Server. Nach Ablauf von 5 Sekunden wird die Antwort geändert und unsere Rückruffunktion getResultsausgeführt. Um dies in Aktion zu sehen, können Sie den obigen Code kopieren / in das Entwicklertool Ihres Browsers einfügen und ausführen.

Wenn Sie bereits mit diesen setTimeoutFunktionen vertraut sind , haben Sie die ganze Zeit über Rückruffunktionen verwendet. Das anonyme Funktionsargument, das an den Funktionsaufruf des obigen Beispiels übergeben wird setTimeout, ist ebenfalls ein Rückruf! Der ursprüngliche Rückruf des Beispiels wird also tatsächlich von einem anderen Rückruf ausgeführt. Achten Sie darauf, nicht zu viele Rückrufe zu verschachteln, wenn Sie helfen können, da dies zu etwas führen kann, das als "Rückrufhölle" bezeichnet wird! Wie der Name schon sagt, ist es keine Freude, damit umzugehen.