Was sind Callback -Funktionen in JavaScript??

Wenn Sie ein Programmierer sind, haben Sie wahrscheinlich von Funktionen gehört, die eine Reihe von Aussagen sind, die eine Aktion ausführen und eine Ausgabe zurückgeben, aber was sind Rückruffunktionen?

Die Rückruffunktion ist ein äußerst wichtiges Konzept von JavaScript und wird in Versprechungen, Ereignishörern, Arrays und vielem mehr verwendet.

Wir werden uns überlegen, welche Rückruffunktionen in diesem Tutorial in JavaScript verwendet werden, und wir werden auch über die synchronen und asynchronen Rückruffunktionen sprechen. Um klare und tiefgreifende Konzepte von Callback -Funktionen zu haben, werden wir auch einige Beispiele implementieren.

Rückruffunktion

Eine Rückruffunktion ist eine Funktion, die zuerst als Argument an eine andere Funktion übergeben wird und nach den in dieser Funktionsdefinition verfassten Aussagen ausgeführt werden muss und wie der Name schon sagt, sie wird später innerhalb der Funktion ausgeführt. Um es in einfache Wörter zu setzen, wird eine Rückruffunktion ausgeführt, sobald der aktuelle Effekt verarbeitet wurde.

Syntax zum Schreiben einer Rückruffunktion in JavaScript

Die grundlegende Syntax ist:

Funktion nameFunc (callbackfunc)
callbackfunc ();

Das ist ein 'nameFunc ()' Funktion das braucht a 'callbackfunc ()' Funktion als Argument. Der 'callbackfunc ()' Funktion wird aus innerhalb der aufgerufen 'nameFunc ()' Funktion Es ist also in der Tat eine Rückruffunktion.

Beispiel 1

Angenommen, wir wollen trösten.protokollieren Sie eine Nachricht nach 2 Sekunden.

Funktion message ()
Konsole.log ("Hallo Welt nach 2 Sekunden");

setTimeout (Message, 2000);

Der setTimeout () Funktion ist eine integrierte Methode von JavaScript, die einen Timer und eine Rückruffunktion als Argument nimmt. Jetzt wird die Nachrichtenfunktion (eine Rückruffunktion) nur aufgerufen und wird ausgeführt, wenn der Timer abläuft.

Im obigen Code wird die Funktionsnachricht () als Argument übergeben und nach 2000 Millisekunden (2 Sekunden) aufgerufen. Um dies mit der Rückruffunktion zu erzählen, wurde die Message () -Funktion nach 2 Sekunden aufgerufen. Es wurde nicht vor diesen 2 Sekunden ausgeführt. Daher ist es eine Rückruffunktion.

Notwendigkeit für Rückruffunktionen?

Sie müssen überlegen, warum wir sogar Rückruffunktionen benötigen. Die Antwort ist einfach. JavaScript ist eine sequentielle oder einstäbige Sprache, was bedeutet.

JavaScript wartet nicht auf eine Antwort, bevor er zur nächsten Zeile übergeht. Es wird weiterhin andere Ereignisse oder Code -Zeilen ausführen und anhören.

Zum Beispiel:

Beispiel2

Angenommen, wir protokollieren 1 und 2 von zwei verschiedenen Funktionen zur Konsole:

Funktion firstMessage ()
Konsole.log ("1");

Funktion SecondMessage ()
Konsole.log ("2");

Erste Nachricht();
SecondMessage ();

Ausgang:

1
2

Wie erwartet die Funktion Erste Nachricht() wird zuerst ausgeführt und dann die SecondMessage () Funktion wird ausgeführt.

Beispiel3

Angenommen, das FirstMessage () Methode Enthält eine API -Anforderung zum Abrufen von Daten von einem Server. Wir müssen auf die Antwort/Antwort des Servers warten. Lassen Sie uns die integrierte Methode verwenden setTimeout einmal mehr.

Diesmal verzögern wir die Anfrage um 3 Sekunden, um zu sehen, wie wir eine API -Abrufanfrage anfordern können.

Funktion firstMessage ()
// Zeitüberschreitungsfunktion zur Verzögerung der Anfrage
setTimeout (function ()
Konsole.log ("1");
, 3000);

Funktion SecondMessage ()
Konsole.log ("2");

Erste Nachricht();
SecondMessage ();

In diesem Code haben wir gerade die Konsole verschoben.log ("1"); in der setTimeout () Funktion.

Nun ist wirklich interessant, dass Sie, wenn Sie diesen Code ausführen, sehen, dass die 2 zuerst in der Konsole angezeigt wird:

Nach 3 Sekunden wird der 1 gezeigt:

Wie wir sehen können, die FirstMessage () Funktion wurde zuerst genannt und dann die SecondMessage () Funktion hieß. Wir können jedoch nicht das Ergebnis in der Sequenz sehen, die wir unsere Funktion genannt haben.

Es ist nicht so, dass JavaScript unseren Code nicht nacheinander zurückgab, sondern nur, dass JavaScript nicht auf die wartet hat FirstMessage () Funktion vollständig auszuführen und begannen, die auszuführen SecondMessage () Funktion.

Dieses Beispiel wurde ausschließlich hier. Mit Rückruffunktionen können wir sicherstellen, dass ein Code erst ausgeführt wird, wenn unser erforderlicher Code ausgeführt wurde.

Rückruffunktionstypen

Jetzt, da wir gesehen haben, was Rückrufe sind, wie sie verwendet werden und warum sie wichtig sind, schauen wir uns die beiden Arten von Rückruffunktionen an.

Synchroner Rückruffunktion

Synchronen Rückruffunktionen werden gleichzeitig mit der Funktion höherer Ordnung ausgeführt/ausgeführt, die die Rückruffunktion verwendet und hauptsächlich blockiert. Es vervollständigt seine Aufgabe und gibt dann die Kontrolle über eine andere Funktion oder Codezeile.

Dies ist vorteilhaft, wie angenommen, Sie holen Elemente von einer API ab. Sie möchten, dass Ihre Seite geladen wird, sobald Sie einige Daten von einer API abgerufen haben. Wenn die Antwort der API nicht abgerufen wird, muss die gesamte Website warten.

Beispiel 2 oben angegeben wurden synchrone Funktionen, da es Zeile nach der Zeile ausgeführt hat und nach der Ausführung der ersten Funktion nur dann die Kontrolle an die zweite Funktion gegeben wurde I-e SecondMessage () Funktion.

Asynchrone Rückruffunktion

Asynchron ist völlig entgegengesetzt von Synchron, da es parallel zum Anrufer der Funktion und der Rückruffunktion funktioniert. Asynchrone Funktionen sind nicht blockieren, wenn sie später als die Funktion höherer Ordnung ausführen oder ausführen.

Beispiel 3 oben angegeben war eine asynchrone Rückruffunktion, wie wir die genannten FirstMessage () Funktion Aber es wartete zwei Sekunden. In diesen beiden Sekunden gab es die Kontrolle zurück und die SecondMessage () Funktion wurde ausgeführt. Sobald die drei Sekunden Zeit abgelaufen war, die FirstMessage () Funktion begann wieder auszuführen.

Abschluss

A Rückruffunktion ist eine Funktion, die zuerst als Argument für eine andere Funktion geliefert wird und nach den in dieser Funktionsdefinition geschriebenen Aussagen ausgeführt werden muss. Wir haben gelernt, welche Rückruffunktionen sie sind und wie sie in JavaScript verwendet werden können, und warum Rückruffunktionen wichtig sind und welche beiden Arten von Rückruffunktionen in diesem Beitrag enthalten sind.