JavaScript-Rückruffunktionen - Was sind Rückrufe in JS und wie werden sie verwendet?

Wenn Sie mit Programmierung vertraut sind, wissen Sie bereits, welche Funktionen funktionieren und wie Sie sie verwenden. Aber was ist eine Rückruffunktion? Rückruffunktionen sind ein wichtiger Bestandteil von JavaScript. Wenn Sie erst einmal verstanden haben, wie Rückrufe funktionieren, werden Sie in JavaScript viel besser.

In diesem Beitrag möchte ich Ihnen anhand einiger Beispiele helfen, zu verstehen, was Rückruffunktionen sind und wie sie in JavaScript verwendet werden.

Was ist eine Rückruffunktion?

In JavaScript sind Funktionen Objekte. Können wir Objekte als Parameter an Funktionen übergeben? Ja.

So können wir Funktionen auch als Parameter an andere Funktionen übergeben und innerhalb der äußeren Funktionen aufrufen. Klingt kompliziert? Lassen Sie mich das in einem Beispiel unten zeigen:

function print(callback) { callback(); }

Die Funktion print () nimmt eine andere Funktion als Parameter und ruft sie im Inneren auf. Dies ist in JavaScript gültig und wird als "Rückruf" bezeichnet. Eine Funktion, die als Parameter an eine andere Funktion übergeben wird, ist also eine Rückruffunktion. Aber das ist nicht alles.

Sie können sich auch die folgende Videoversion der Rückruffunktionen ansehen:

Warum brauchen wir Rückruffunktionen?

JavaScript führt den Code nacheinander in der Reihenfolge von oben nach unten aus. Es gibt jedoch einige Fälle, in denen Code ausgeführt wird (oder ausgeführt werden muss), nachdem etwas anderes passiert ist, und auch nicht nacheinander. Dies wird als asynchrone Programmierung bezeichnet.

Rückrufe stellen sicher, dass eine Funktion nicht ausgeführt wird, bevor eine Aufgabe abgeschlossen ist, sondern direkt ausgeführt wird, nachdem die Aufgabe abgeschlossen wurde. Es hilft uns bei der Entwicklung von asynchronem JavaScript-Code und schützt uns vor Problemen und Fehlern.

In JavaScript besteht die Möglichkeit, eine Rückruffunktion zu erstellen, darin, sie als Parameter an eine andere Funktion zu übergeben und sie dann direkt zurückzurufen, nachdem etwas passiert ist oder eine Aufgabe abgeschlossen wurde. Mal sehen wie ...

So erstellen Sie einen Rückruf

Um zu verstehen, was ich oben erklärt habe, möchte ich mit einem einfachen Beispiel beginnen. Wir möchten eine Nachricht in der Konsole protokollieren, diese sollte jedoch nach 3 Sekunden vorhanden sein.

const message = function() { console.log("This message is shown after 3 seconds"); } setTimeout(message, 3000);

In JavaScript gibt es eine integrierte Methode namens "setTimeout", die eine Funktion aufruft oder einen Ausdruck nach einem bestimmten Zeitraum (in Millisekunden) auswertet. Hier wird also die Funktion "Nachricht" aufgerufen, nachdem 3 Sekunden vergangen sind. (1 Sekunde = 1000 Millisekunden)

Mit anderen Worten, die Nachrichtenfunktion wird aufgerufen, nachdem etwas passiert ist (nach 3 Sekunden für dieses Beispiel), jedoch nicht vorher. Die Nachrichtenfunktion ist also ein Beispiel für eine Rückruffunktion.

Was ist eine anonyme Funktion?

Alternativ können wir eine Funktion direkt in einer anderen Funktion definieren, anstatt sie aufzurufen. Es wird so aussehen:

setTimeout(function() { console.log("This message is shown after 3 seconds"); }, 3000);

Wie wir sehen können, hat die Rückruffunktion hier keinen Namen und eine Funktionsdefinition ohne Namen in JavaScript wird als "anonyme Funktion" bezeichnet. Dies erledigt genau die gleiche Aufgabe wie im obigen Beispiel.

Rückruf als Pfeilfunktion

Wenn Sie möchten, können Sie auch dieselbe Rückruffunktion wie eine ES6-Pfeilfunktion schreiben, eine neuere Art von Funktion in JavaScript:

setTimeout(() => { console.log("This message is shown after 3 seconds"); }, 3000);

Was ist mit Events?

JavaScript ist eine ereignisgesteuerte Programmiersprache. Wir verwenden auch Rückruffunktionen für Ereignisdeklarationen. Angenommen, wir möchten, dass Benutzer auf eine Schaltfläche klicken:

Click here

Dieses Mal wird nur dann eine Meldung auf der Konsole angezeigt, wenn der Benutzer auf die Schaltfläche klickt:

document.queryselector("#callback-btn") .addEventListener("click", function() { console.log("User has clicked on the button!"); });

Hier wählen wir also zuerst die Schaltfläche mit ihrer ID aus und fügen dann einen Ereignis-Listener mit der Methode addEventListener hinzu. Es werden 2 Parameter benötigt. Der erste ist der Typ "Klick", und der zweite Parameter ist eine Rückruffunktion, die die Nachricht protokolliert, wenn auf die Schaltfläche geklickt wird.

Wie Sie sehen, werden Rückruffunktionen auch für Ereignisdeklarationen in JavaScript verwendet.

Einpacken

Rückrufe werden häufig in JavaScript verwendet, und ich hoffe, dieser Beitrag hilft Ihnen zu verstehen, was sie tatsächlich tun und wie Sie einfacher mit ihnen arbeiten können. Als Nächstes erfahren Sie mehr über JavaScript-Versprechen. Dies ist ein ähnliches Thema, das ich in meinem neuen Beitrag erläutert habe.

Wenn Sie mehr über Webentwicklung erfahren möchten, folgen Sie mir auf Youtube !

Danke fürs Lesen!