Was ist der Unterschied zwischen einer Rückruffunktion und einem Ereignis-Listener?


Antwort 1:

Frage: Was ist der Unterschied zwischen einer Rückruffunktion und einem Ereignis-Listener?

Der Unterschied ist meist nur ein Anwendungsfall. Sie sind im Wesentlichen dasselbe. Jede ist eine Funktion oder Prozedur, die nach Abschluss eines Ereignisses oder einer Aktivität ausgeführt wird.

In C gibt es beispielsweise eine Funktion namens qsort (), die eine schnelle Sortierung über ein Array oder einen Puffer ausführt und einen Zeiger auf eine Funktion benötigt - eine Rückruffunktion. Diese Funktion kann in jeder Hinsicht als onCompare () -Ereignishandler betrachtet werden, da diese Funktion / dieser Zeiger immer dann aufgerufen wird, wenn zwei Elemente in der Menge, die an sie übergeben wurden, miteinander verglichen werden müssen.

Grundsätzlich sind Callback-Funktionen, Event-Handler, Listener, Publisher / Subscriber und Observable / Observer unterschiedliche Namen für dasselbe Entwurfsmuster mit geringfügig unterschiedlichen Anwendungsfällen. Rückruffunktionen werden normalerweise als solche bezeichnet, wenn eine Funktion aufgerufen wird und die Rückruffunktion an die erste aufgerufene Funktion übergeben werden muss. Es ist in der Regel auch für eine sehr kurze Zeit. In Situationen, in denen ein Feld in einer Klasse / einem Objekt gesetzt wird, was häufig als Ereignishandler bezeichnet wird, gibt es jedoch viele Situationen, insbesondere in Javascript in JQuery, in denen Funktionen / Methoden wie setClick () aufgerufen und eine Funktion als Argument übergeben werden. Dies dauert viel länger als eine Funktionsausführung. Gleiches gilt für Publisher / Subscriber und Observable / Observer - Längere Zeiträume. Listener sind im Wesentlichen die gleichen wie Event-Handler, aber der Begriff wird in einigen Sprachen wie Java bevorzugt.



Antwort 2:

Im Allgemeinen übergeben Sie die Rückruffunktion zur Entwurfszeit (dem Zeitpunkt, an dem Sie Ihr Programm schreiben). In der Regel handelt es sich dabei um ein Argument und in vielen Fällen um ein erforderliches Argument. Und natürlich wird Callback die meiste Zeit als Funktion und nicht als Klasse implementiert.

Mit anderen Worten, ein Rückruf wird von der Anwendung oder dem Modulcode erwartet und (in den meisten Fällen) immer ausgeführt.

Event Listener ist eine Klasse oder eine Funktion, die zur Laufzeit (zum Zeitpunkt der tatsächlichen Ausführung Ihres Programms) aufgerufen wird. Es ist normalerweise Teil eines umfassenderen Konzepts namens Observer (oder Publisher / Subscriber), bei dem einige Anwendungskomponenten Ereignisse abonnieren und andere Komponenten diese Ereignisse ausgeben (ohne zu wissen oder sich darum zu kümmern, wer abonniert ist). Daher ein weiterer Unterschied: Ein Ereignis kann bei seiner Auslösung von keinem, einem oder mehreren Listenern behandelt werden, und das Modul, das das Ereignis ausstrahlt, weiß möglicherweise nicht einmal, welche Listener angeschlossen sind, oder kümmert sich nicht darum, welche.

Andererseits weiß das Modul immer, welchen Rückruf es erwartet und wann es auszuführen ist. Diese Logik ist im Modul fest codiert.

Infolgedessen können Sie mit Ereignis-Listenern eine viel lockerer gekoppelte Anwendung erstellen (was gut ist). Wenn Sie sich andererseits den Code ansehen, der das Ereignis ausgibt, ist es oft schwierig zu sagen, welche Listener aufgerufen werden, ohne andere Teile des Codes zu untersuchen.

Betrachten Sie ein Beispiel in Javascript:

// Eine grundlegende Implementierung von Event Observer

lass Zuhörer = {}

Funktion listen (event, newListener) {
// ungültige Listener verwerfen
if ('function'! == typeof newListener) {
Rückkehr
    }

// bei Bedarf ein neues Event einrichten
    if ('undefined' === Hörertyp [event]) {
        listeners [event] = neues Array
    }
    
    // registriere den Listener für das Event
    listeners [event] .push (newListener)
}

Funktionsaussendung (Ereignis, Daten) {
if (Array.isArray (listeners [event])) {
        listeners [event] .forEach (Listener => Listener (Daten))
    }
}

asynchrone Funktion fetchApiData (Endpunkt, Rückruf) {
let request = new XMLHttpRequest ()
    request.open ('GET', Endpunkt)
    const response = warte auf request.send ()

    if ('function' === Rückruftyp) {
    Rückruf (Antwort)
    }

    emit ('api_response', antwort)
}

Stellen Sie sich vor, dass der oben genannte Code als Modul eines Drittanbieters gepackt ist und Sie ihn importieren und in Ihrer Anwendung verwenden.

"FetchApiData" akzeptiert einen Rückruf und gibt Ereignisse aus. Auf diese Weise können Sie es auf zwei verschiedene Arten verwenden.

Wenn Sie diese Erfolgslogik jetzt nur in einer bestimmten Situation ausführen möchten, übergeben Sie einen Rückruf:

fetchApiData (
"https://myawesomeapi.io",
    response => console.log ('Hurra! Antwort erhalten! Aber psssst!')
)

Wenn Sie jedoch wissen, dass für jede Art von Antwort immer eine Logik ausgeführt wird, können Sie einen Ereignis-Listener registrieren und die Notwendigkeit eines Rückrufs je vergessen:

listen ('api_response', antwort => silentlyLogResponse (antwort))

Jedes Mal, wenn Sie fetchApiData aufrufen, wird silentlyLogResponse (response) aufgerufen, da das Ereignis automatisch ausgelöst wird. Sie müssen nicht mehr jedes Mal einen Rückruf tätigen.

fetchApiData ('https://myawesomeapi.io') // ruft silentlyLogResponse auf

und Sie können so viele Zuhörer für eine Veranstaltung registrieren, wie Sie möchten:

listen ('api_response', updateDOM)
hör zu ('api_response', makeCoffee)
hör zu ('api_response', playMusic)
hör zu ('api_response', makeAmericaGreatAgain)

Und sie werden jedes Mal ausgeführt, wenn ein Ereignis ausgegeben wird.



Antwort 3:

Der Unterschied besteht darin, dass eine Rückruffunktion, wie der Name sagt, eine Funktion ist, die als Rückruf verwendet wird.

Zum Beispiel:

Funktion connect ($ address, $ callback) {
   $ connected = connect0 ($ address);

   if ($ connected) {
      $ callback-> execute ();
   }
}

connect ("123.123.123.123:8080", function () {
   echo "Erfolgreich verbunden!";
});


Antwort 4:

Eine Rückruffunktion ist eine Funktion in JavaScript. Es wird als Argument an eine andere Funktion übergeben, die dann in der äußeren Funktion aufgerufen wird, um eine Routine oder Aktion abzuschließen.

Ein Ereignis-Listener ist auch eine Rückruffunktion, eine besondere Art (siehe Details unten).

Beispiel für eine Rückruffunktion:

Funktionsgruß (msg) {
    console.log (msg);
}
Funktion sayHello (Name, Rückruf) {
    const greet = 'Hallo' + name;
    Rückruf (Gruß);
}
sag Hallo ('John', Gruß);
Hallo John

Die Rückruffunktion kann auch als anonyme oder Pfeilfunktion übergeben werden:

sayHello ('John', Funktion (Text) {console.log (Text)});
sayHello ('John', (text) => console.log (text));

Das obige Beispiel ist ein synchroner Rückruf, da er sofort ausgeführt wird.

Ein asynchroner Rückruf:

const getData = function (Rückruf) {
    const data = {note: 'Die Nachricht lautet: Tic-tac-toe'};
    setTimeout (() => {
        Rückruf (Daten);
    }, 3000)
}
const callback = funktion (daten) {
    console.log (data.note)
}
getData (Rückruf);
Die Nachricht lautet: Tic-Tac-Toe

Der Funktion getData wird ein Rückruf übergeben, der nach einiger Arbeit ausgeführt wird (in diesem Fall kehrt die Arbeit mit einem Objekt nach 3 Sekunden zurück).

Ereignislistener im Browser:

Nehmen wir diesen Beispielcode mit HTML und JS:

Der HTML: