Was ist der tatsächliche Unterschied zwischen "Rückruf der Funktion" und "normaler Funktion"?


Antwort 1:

Rückruffunktionen sind normale Funktionen, sie werden lediglich als Parameter an andere Funktionen übergeben. Angenommen, wir haben eine Schaltfläche in unserem Dokument, können wir diesen Code verwenden:

Funktion logElementText (eventOrElement) {if (! eventOrElement) {neuen RefernceError auslösen ('Kein Ereignis oder Element angegeben.'); } if (eventOrElement.target) {// Ein Ereignisobjekt wurde übergeben. console.log (eventOrElement.target.textContent); } else {// Angenommen, das Element wurde übergeben. console.log (eventOrElement.textContent); }} var button = document.querySelector ('button'); // Wir können logElementText als Rückruf verwenden: button.addEventListener ('click', logElementText); // Oder wir können die Funktion direkt aufrufen: logElementText (button);

Beachten Sie, wie wir logElementText entweder als Rückruf über addEventListener übergeben können. In diesem Fall wird es ausgeführt, wenn ein Klickereignis auf der Schaltfläche auftritt, oder wir können die Funktion einfach direkt aufrufen und ein Element übergeben, da sie so geschrieben ist, dass sie beide verarbeiten kann .

In diesem Fall wurde der Rückruf vom Ereignisbehandlungsmechanismus des Browsers ausgeführt, aber wir können dies auch selbst tun:

Funktion loadSomeData (URL, Rückruf) {if (! url) {neuen Referenzfehler auslösen ('Keine URL angegeben'); } if (! callback || typeof callback! == 'function') {neuen TypeError auslösen ('Callback ist keine Funktion'); } var xhr = new XMLHttpRequest (); xhr.open ('GET', url, true); xhr.onload = function () {if (xhr.status <400) {// Hier führen wir den bereitgestellten Rückruf aus. Rückruf (xhr.response); } else {console.log ('Oh je, etwas ist schief gelaufen :('); console.log (xhr.statusText);}} xhr.send ();} function displayData (data) {console.log (data); } loadSomeData ('/ fetch-data? format = json', displayData); displayData ({Vorname: 'Andy', Nachname: 'Farrell', Ort: 'England', Hobbys: ['Fotografie', 'Softwareentwicklung'] });

Sehen Sie, wie wir in Zeile 15 einfach den Rückrufparameter aufrufen, als wäre es eine Funktion? Beachten Sie auch, dass wir in Zeile 5 einige Abwehrmaßnahmen ergreifen, um sicherzustellen, dass der Rückruf tatsächlich eine Funktion ist.

Schließlich werden Rückrufe häufig als anonyme Funktionen bereitgestellt, dh Funktionen, die keinen Namen haben und wie folgt inline übergeben werden:

loadSomeData ('/ fetch-data? format = text', Funktion (Daten) {var UpperCased = data.toUpperCase (); console.log (UpperCased);});

Anstatt eine vorhandene Funktion als zweiten Parameter für loadSomeData bereitzustellen, stellen wir hier nur eine anonyme Funktion direkt bereit. Mit anderen Worten, wir stellen ein Funktionsliteral bereit, genau wie wir im vorherigen Beispiel ein Objektliteral für die Funktion displayData in Zeile 31 bereitgestellt haben.

Der Grund, warum dies alles funktioniert, ist, dass in JavaScript-Funktionen erstklassige Objekte sind, mit anderen Worten, sie sind wie jedes andere Objekt: Sie können eine Variable als Funktion zuweisen, eine Funktion kann Eigenschaften und Methoden haben (wie Aufruf und Anwenden) ), und Sie können sie als Parameter an andere Funktionen übergeben.


Antwort 2:

Rückruf der Funktion: Wenn Sie eine Operation für ein Ereignis ausführen möchten

Wie Zeit auf Knopfdruck anzeigen.

Dann überschreiben Sie die Onclick-Funktion für diese Schaltfläche.

Wenn also (zeitunabhängig) auf diese Schaltfläche geklickt wird, ruft das anwendungsinterne Framework das Ereignis onclick auf und Ihre Funktion onclick wird aufgerufen.

Normale Funktion: Jede Funktion ist normale Funktion.