Tiefgreifendes Verständnis der JavaScript-Rückruffunktionen

Vorwort

JavaScript-Rückruffunktionen sind ein wichtiges Konzept, das Sie verstehen müssen, um ein erfolgreicher JavaScript-Entwickler zu werden. Ich bin mir jedoch sicher, dass Sie nach der Lektüre dieses Artikels alle Hindernisse überwinden können, die Ihnen bisher bei der Verwendung von Callback-Methoden begegnet sind.

Bevor wir beginnen, stellen wir zunächst sicher, dass unser Verständnis von Funktionen solide ist.

Kurzübersicht: JavaScript-Funktionen

Was ist eine Funktion?

Eine Funktion ist ein logischer Baustein, der eine Gruppe von Codes enthält, um eine bestimmte Aufgabe auszuführen. Mithilfe von Funktionen lässt sich Code tatsächlich besser organisieren, was die Fehlerbehebung und Wartung erleichtert. Funktionen ermöglichen auch die Wiederverwendung von Code.

Sie definieren die Funktion einmal und rufen sie bei Bedarf auf, anstatt immer wieder denselben Code zu schreiben.

Deklarieren einer Funktion

Sehen wir uns nun an, wie eine Funktion in JavaScript deklariert wird.

1. Verwenden des Konstruktors der Funktion: Bei dieser Methode wird die Funktion mithilfe des Konstruktors der Funktion erstellt. Technisch gesehen ist diese Methode weniger effizient als das Deklarieren von Funktionen mit der Funktionsausdruckssyntax und der Funktionsdeklarationsanweisungssyntax.
2. Verwenden eines Funktionsausdrucks: Im Allgemeinen ist dieser Ansatz derselbe wie die Variablenzuweisung. Kurz gesagt wird der Funktionskörper als Ausdruck behandelt und dieser Ausdruck wird einer Variablen zugewiesen. Mit dieser Syntax definierte Funktionen können benannte oder anonyme Funktionen sein.
   Eine Funktion ohne Namen wird als anonyme Funktion bezeichnet. Eine anonyme Funktion ist selbstaufrufend, was bedeutet, dass sie sich automatisch selbst aufruft. Dieses Verhalten wird auch als „Sofort aufgerufener Funktionsausdruck“ (IIFE) bezeichnet.
3. Verwenden einer Funktionsdeklaration: Diese Methode ist die alte Methode, die üblicherweise in JavaScript verwendet wird. Nach dem Schlüsselwort „function“ müssen Sie den Namen der Funktion angeben. Wenn die Funktion anschließend mehrere Parameter oder Argumente akzeptiert, müssen Sie diese ebenfalls angeben. Dieser Teil ist jedoch völlig optional.

Innerhalb des Funktionskörpers muss die Funktion einen Wert an den Aufrufer zurückgeben. Nach dem Auftreten einer Return-Anweisung wird die Ausführung der Funktion beendet. Innerhalb der Funktion fungieren die Parameter als lokale Variablen.

Ebenso sind innerhalb einer Funktion deklarierte Variablen lokal für diese Funktion. Auf lokale Variablen kann nur innerhalb der jeweiligen Funktion zugegriffen werden, sodass Variablen mit demselben Namen problemlos in unterschiedlichen Funktionen verwendet werden können.

Aufrufen einer Funktion

In den folgenden Fällen wird die zuvor deklarierte Funktion aufgerufen:

• Wenn beispielsweise ein Ereignis eintritt, klickt der Benutzer auf eine Schaltfläche oder wählt eine Option aus einer Dropdown-Liste aus usw.
• Wenn die Funktion aus Javascript-Code aufgerufen wird.
• Diese Funktion kann automatisch aufgerufen werden, was wir bereits in anonymen Funktionsausdrücken besprochen haben.

Der Operator () ruft die Funktion auf.

Was ist eine Rückruffunktion?

Laut MDN: Eine Rückruffunktion ist eine Funktion, die als Parameter an eine andere Funktion übergeben wird. Anschließend wird die Rückruffunktion innerhalb der äußeren Funktion aufgerufen, um einen Vorgang abzuschließen.

Lassen Sie es mich in menschlichen Begriffen erklären: Ein Rückruf ist eine Funktion, die unmittelbar ausgeführt wird, nachdem die Ausführung einer anderen Funktion abgeschlossen ist. Eine Rückruffunktion ist eine Funktion, die als Argument an eine andere JavaScript-Funktion übergeben wird. Diese Rückruffunktion wird innerhalb der ihr übergebenen Funktion ausgeführt.

Funktionen werden in JavaScript als erstklassige Objekte betrachtet. Unter einem erstklassigen Objekt verstehen wir eine Zahl, Funktion oder Variable, die wie jedes andere Objekt in der Sprache behandelt werden kann. Als Objekte erster Klasse können Funktionen als Variablen an andere Funktionen übergeben und auch von anderen Funktionen zurückgegeben werden.

Funktionen, die diese Art von Operation ausführen können, werden als Funktionen höherer Ordnung bezeichnet. Die Rückruffunktion ist eigentlich ein Muster. Der Begriff „Pattern“ bezeichnet eine bewährte Vorgehensweise zur Lösung häufiger Probleme in der Softwareentwicklung. Am besten verwenden Sie Callback-Funktionen als Callback-Muster.

Warum brauchen wir Rückrufe?

Clientseitiges JavaScript wird im Browser ausgeführt und der Hauptprozess des Browsers ist eine einfädige Ereignisschleife. Wenn wir versuchen, einen Vorgang mit langer Laufzeit in einer einfädigen Ereignisschleife auszuführen, wird der Prozess blockiert. Dies ist technisch gesehen schlecht, da der Prozess die Verarbeitung anderer Ereignisse stoppt, während er auf den Abschluss der Operation wartet.

Beispielsweise wird die Alert-Anweisung als einer der Sperrcodes für JavaScript im Browser angesehen. Wenn Sie die Warnung ausführen, können Sie keine Interaktion im Browser durchführen, bis Sie das Dialogfenster der Warnung schließen. Um das Blockieren lang laufender Vorgänge zu verhindern, verwenden wir Rückrufe.

Lassen Sie uns einen genaueren Blick darauf werfen, damit Sie genau verstehen, in welchen Situationen Rückrufe verwendet werden.

Funktion zum Abrufen und Anzeigen von Nachrichten

Im obigen Codeausschnitt wird zuerst die Funktion getMessage() und dann displayMessage() ausgeführt. Beide zeigen eine Meldung im Konsolenfenster des Browsers an und beide werden sofort ausgeführt.

In einigen Fällen wird Code nicht sofort ausgeführt. Wenn wir beispielsweise davon ausgehen, dass die Funktion getMessage() einen API-Aufruf ausführt, muss sie eine Anfrage an den Server senden und auf eine Antwort warten. Was sollten wir jetzt tun?

So verwenden Sie Rückruffunktionen

Anstatt Ihnen die Syntax der JavaScript-Rückruffunktionen zu erklären, dachte ich, es wäre besser, die Rückruffunktionen im vorherigen Beispiel zu implementieren. Der geänderte Codeausschnitt ist im Screenshot unten zu sehen.

Anzeigen von Nachrichten mit Callback-Funktionen

Um eine Rückruffunktion zu verwenden, müssen wir eine Art Aufgabe ausführen, die das Ergebnis nicht sofort anzeigt. Um dieses Verhalten zu simulieren, verwenden wir die setTimeout()-Funktion von JavaScript. Die Funktion pausiert für zwei Sekunden und zeigt dann die Meldung „Hallo“ im Konsolenfenster an.

Die „angezeigten Meldungen“ werden im Konsolenfenster des Browsers angezeigt. In diesem Fall müssen wir zuerst auf die Funktion getMessage() warten. Führen Sie nach erfolgreicher Ausführung dieser Funktion die Funktion displayMessage() aus.

So funktionieren Rückrufe

Lassen Sie mich erklären, was im vorherigen Beispiel hinter den Kulissen passiert ist.

Wie Sie dem vorherigen Beispiel entnehmen können, haben wir in der Funktion getMessage() zwei Parameter übergeben. Das erste Argument ist die msg-Variable, die im Konsolenfenster des Browsers angezeigt wird, und das zweite Argument ist die Rückruffunktion.

Jetzt fragen Sie sich vielleicht, warum wir die Rückruffunktion als Parameter übergeben – um eine Rückruffunktion zu implementieren, müssen wir eine Funktion als Parameter an eine andere Funktion übergeben.

Nachdem getMessage() seine Aufgabe abgeschlossen hat, rufen wir die Rückruffunktion auf. Später, wenn die Funktion getMessage() aufgerufen wird, wird die Referenz an die Funktion displayMessage() übergeben, die die Rückruffunktion ist.

Beachten Sie, dass wir beim Aufruf der Funktion getMessage() nur deren Referenz an die Funktion displayMessage() übergeben. Aus diesem Grund wird der Funktionsaufrufoperator, auch bekannt als das ()-Symbol, daneben nicht angezeigt.

Sind Javascript-Rückrufe asynchron?

JavaScript gilt als Single-Thread-Skriptsprache. Single-Threaded bedeutet, dass JavaScript jeweils einen Codeblock ausführt. Während JavaScript mit der Ausführung eines Blocks beschäftigt ist, kann es nicht mit dem nächsten Block fortfahren.

Mit anderen Worten können wir uns vorstellen, dass JavaScript-Code grundsätzlich blockierend ist. Diese blockierende Natur hindert uns jedoch in einigen Fällen daran, Code zu schreiben, in dem wir keine Möglichkeit haben, das Ergebnis unmittelbar nach der Ausführung einer bestimmten Aufgabe zu erhalten.

Die Aufgaben, von denen ich spreche, umfassen Situationen, in denen:

• Die Daten werden durch API-Aufrufe an bestimmte Endpunkte abgerufen.
• Holen Sie sich einige Ressourcen (z. B. Textdateien, Bilddateien, Binärdateien usw.) von einem Remote-Server, indem Sie Netzwerkanforderungen senden.
  

Um diese Situationen zu bewältigen, müssen Sie asynchronen Code schreiben, und Rückruffunktionen sind eine Möglichkeit, diese Situationen zu bewältigen. Rückruffunktionen sind also im Wesentlichen asynchron.

Javascript-Callback-Hölle

Wenn mehrere asynchrone Funktionen nacheinander ausgeführt werden, kommt es zur Callback-Hölle. Sie ist auch als Pyramide des Todes bekannt.

Angenommen, Sie möchten eine Liste aller Github-Benutzer erhalten. Suchen Sie dann unter den Benutzern nach den wichtigsten Mitwirkenden an der JavaScript-Bibliothek. Anschließend möchten Sie die Details der Person namens John unter „Benutzer“ abrufen.

Um diese Funktionalität mit Hilfe von Callbacks zu implementieren, sollte der Code folgendermaßen aussehen:

http.get('https://api.github.com/users', Funktion(Benutzer) {
  /* Alle Benutzer anzeigen */
  console.log(Benutzer);
  http.get('https://api.github.com/repos/javascript/contributors?q=contributions&order=desc', Funktion(Mitwirkende) {
  /* Alle Top-Mitwirkenden anzeigen */
    console.log(Mitwirkende);
    http.get('https://api.github.com/users/Jhon', Funktion(Benutzerdaten) {
    /* Benutzer mit Benutzernamen „Jhon“ anzeigen */
      console.log(Benutzerdaten);
    });
  });
});

Aus dem obigen Codeausschnitt können Sie ersehen, dass der Code schwieriger zu verstehen, zu warten und zu ändern ist. Dies wird durch die Verschachtelung von Rückruffunktionen verursacht.

Wie vermeidet man die Callback-Hölle?

Es gibt verschiedene Techniken, mit denen Sie die Callback-Hölle vermeiden können, wie unten gezeigt.

1. Verwendung von Versprechen
2. Mit async-await
3. Verwenden der async.js-Bibliothek
   

Verwenden der Async.js-Bibliothek

Lassen Sie uns darüber sprechen, wie Sie mit der Bibliothek async.js die Callback-Hölle vermeiden können.

Laut der Beschreibung auf der offiziellen Website von async.js: Async ist ein Toolmodul, das direkte und leistungsstarke Funktionen für die Verwendung von asynchronem JavaScript bereitstellt.

Insgesamt bietet Async.js etwa 70 Funktionen. Im Moment werden wir nur zwei davon besprechen, nämlich async.waterfall() und async.series().

async.Wasserfall()

Diese Funktion ist nützlich, wenn Sie einige Aufgaben nacheinander ausführen und dann die Ergebnisse der vorherigen Aufgabe an die nächste übergeben möchten. Es benötigt ein Array von Funktionen „Tasks“ und eine abschließende „Callback“-Funktion, die aufgerufen wird, nachdem alle Funktionen im „Tasks“-Array abgeschlossen sind oder nachdem „Callback“ mit einem Fehlerobjekt aufgerufen wurde.

var async = erfordern('async');
async.Wasserfall([
    Funktion(Rückruf) {
      /*  
        Hier ist der erste Argumentwert null, das bedeutet, dass
        Die nächste Funktion wird aus dem Funktionsarray ausgeführt.
        Wenn der Wert wahr oder eine beliebige Zeichenfolge war, dann die endgültige Rückruffunktion
        ausgeführt werden, andere verbleibende Funktionen im Array 
        wird nicht ausgeführt.
      */
        Rückruf (null, „eins“, „zwei“);
    },
    Funktion(Param1, Param2, Rückruf) {
        // param1 ist jetzt gleich ‚eins‘ und param2 ist jetzt gleich ‚zwei‘
        Rückruf (null, „drei“);
    },
    Funktion(Param1, Rückruf) {
        // param1 ist jetzt gleich „drei“
        Rückruf (null, „erledigt“);
    }
], Funktion (Fehler, Ergebnis) {
    /*
      Dies ist die letzte Rückruffunktion.
      Ergebnis ist jetzt gleich „erledigt“
    */
});

async.series()

Dies ist nützlich, wenn Sie eine Funktion ausführen möchten und dann das Ergebnis erhalten müssen, nachdem alle Funktionen erfolgreich ausgeführt wurden. Der Hauptunterschied zwischen async.waterfall() und async.series() besteht darin, dass async.series() keine Daten von einer Funktion an eine andere übergibt.

async.series([
    Funktion(Rückruf) {
        // mach ein paar Sachen ...
        Rückruf (null, „eins“);
    },
    Funktion(Rückruf) {
        // noch mehr Sachen machen ...
        Rückruf (null, „zwei“);
    }
],
// optionaler Rückruf
Funktion(Fehler, Ergebnisse) {
    // Ergebnisse sind jetzt gleich ['eins', 'zwei']
});

Javascript-Callbacks und Closures

Verschlüsse

Technisch gesehen ist eine Closure eine Gruppierung gebündelter Funktionen, die auf den umgebenden Zustand verweist.

Kurz gesagt ermöglichen Closures den Zugriff auf den Gültigkeitsbereich der äußeren Funktion von der inneren Funktion aus.

Um Closures zu verwenden, müssen wir eine Funktion innerhalb einer anderen Funktion definieren. Wir müssen es dann zurückgeben oder an eine andere Funktion übergeben.

Rückrufe

Konzeptionell ähneln Callbacks Closures. Bei einem Rückruf wird grundsätzlich eine Funktion als eine andere Funktion verwendet.

Schlussworte

Hoffentlich räumt dieser Artikel alle Ihre Zweifel bezüglich JavaScript-Rückruffunktionen aus. Wenn Sie diesen Artikel hilfreich fanden, teilen Sie ihn bitte mit anderen.

Dies ist das Ende dieses Artikels über JavaScript-Rückruffunktionen. Weitere relevante Inhalte zu JavaScript-Rückruffunktionen finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!