Erstellen Sie einen benutzerdefinierten Rückruf in JavaScript

Lesezeit: 5 Minuten

Erstellen Sie einen benutzerdefinierten Ruckruf in JavaScript
Amgad Fahmi

Alles, was ich tun muss, ist, eine Callback-Funktion auszuführen, wenn meine aktuelle Funktionsausführung endet.

function LoadData() 
{
    alert('The data has been loaded');
    //Call my callback with parameters. For example,
    //callback(loadedData , currentObject);
}

Ein Verbraucher für diese Funktion sollte wie folgt aussehen:

object.LoadData(success);

function success(loadedData , currentObject) 
{
  //Todo: some action here 
}

Wie setze ich das um?

  • object.LoadData(success) Anruf muss sein nach dem function success ist definiert. Andernfalls erhalten Sie eine Fehlermeldung, die Ihnen mitteilt, dass die Funktion nicht definiert ist.

    – J. Bruni

    29. Dezember 2011 um 13:41 Uhr

Erstellen Sie einen benutzerdefinierten Ruckruf in JavaScript
TJ Crowder

Eigentlich funktioniert Ihr Code so wie er ist, deklarieren Sie einfach Ihren Callback als Argument und Sie können ihn direkt mit dem Argumentnamen aufrufen.

Die Grundlagen

function doSomething(callback) {
    // ...

    // Call the callback
    callback('stuff', 'goes', 'here');
}

function foo(a, b, c) {
    // I'm the callback
    alert(a + " " + b + " " + c);
}

doSomething(foo);

Das wird anrufen doSomethingder anrufen wird foowas darauf hinweist, dass “Zeug hierher kommt”.

Beachten Sie, dass es sehr wichtig ist, die Funktion zu übergeben Hinweis (foo), anstatt die Funktion aufzurufen und ihr Ergebnis zu übergeben (foo()). In Ihrer Frage machen Sie es richtig, aber es lohnt sich nur darauf hinzuweisen, weil es ein häufiger Fehler ist.

Fortgeschritteneres Zeug

Manchmal möchten Sie den Rückruf aufrufen, damit er einen bestimmten Wert für sieht this. Das geht ganz einfach mit JavaScript call Funktion:

function Thing(name) {
    this.name = name;
}
Thing.prototype.doSomething = function(callback) {
    // Call our callback, but using our own instance as the context
    callback.call(this);
}

function foo() {
    alert(this.name);
}

var t = new Thing('Joe');
t.doSomething(foo);  // Alerts "Joe" via `foo`

Sie können auch Argumente übergeben:

function Thing(name) {
    this.name = name;
}
Thing.prototype.doSomething = function(callback, salutation) {
    // Call our callback, but using our own instance as the context
    callback.call(this, salutation);
}

function foo(salutation) {
    alert(salutation + " " + this.name);
}

var t = new Thing('Joe');
t.doSomething(foo, 'Hi');  // Alerts "Hi Joe" via `foo`

Manchmal ist es nützlich, die Argumente, die Sie dem Callback geben möchten, als Array und nicht einzeln zu übergeben. Sie können verwenden apply das zu tun:

function Thing(name) {
    this.name = name;
}
Thing.prototype.doSomething = function(callback) {
    // Call our callback, but using our own instance as the context
    callback.apply(this, ['Hi', 3, 2, 1]);
}

function foo(salutation, three, two, one) {
    alert(salutation + " " + this.name + " - " + three + " " + two + " " + one);
}

var t = new Thing('Joe');
t.doSomething(foo);  // Alerts "Hi Joe - 3 2 1" via `foo`

  • Ich weiß, dass es funktionieren wird, wenn ich keine Parameter wie das von Ihnen geschriebene Beispiel habe, aber wenn ich versuche, eine Funktion mit Parametern zu übergeben, wird eine Ausnahme ausgelöst und mir mitgeteilt, dass die Funktion nicht definiert ist

    – Amgad Fahmi

    3. Februar 2010 um 9:29 Uhr

  • @TiTaN: Das ist seltsam, es ist nichts Besonderes, Parameter an den Callback zu übergeben. Die Callback-Referenz, die Sie an Ihre Funktion übergeben, ist eine Funktionsreferenz wie jede andere, Sie können damit alle normalen Dinge tun.

    – TJ Crowder

    3. Februar 2010 um 9:32 Uhr

  • @alle, die geantwortet haben: Ich denke, das Problem von TiTaN ist, dass er nicht weiß, wie man eine Funktion, die Argumente erfordert, an einen Callback übergibt, der keine Argumente übergibt. Überlegen setTimeout(). Die Antwort besteht darin, den Rückruf in eine Schließung zu verpacken: doSomething(function(){foo('this','should','work')})

    – Schlafmann

    3. Februar 2010 um 10:12 Uhr

  • Jemand weist TiTaN auf einen Thread (vorzugsweise auf SO), in dem das obige Problem diskutiert wird. Mein Such-Fu ist heute schwach.

    – Schlafmann

    3. Februar 2010 um 10:13 Uhr

  • @Webwoman – Das hängt von Ihrem Anwendungsfall ab. Sie können es als Argument übergeben oder in eine Art Einstellungs-/Optionsobjekt oder eine von mehreren anderen Optionen einfügen.

    – TJ Crowder

    6. Februar 2019 um 7:50 Uhr

Es empfiehlt sich sicherzustellen, dass der Callback eine tatsächliche Funktion ist, bevor Sie versuchen, ihn auszuführen:

if (callback && typeof(callback) === "function") {

  callback();
}

  • if(typeof callback == "function") wird das gleiche Ergebnis haben.

    – Reaktgular

    31. Oktober 2013 um 15:00 Uhr

  • Ja, aber wenn es keinen Rückruf gibt, warum sollte man sich dann die Mühe machen? Das ist der Punkt callback &&

    – theonlygusti

    24. Dezember 2014 um 15:41 Uhr

1647264310 21 Erstellen Sie einen benutzerdefinierten Ruckruf in JavaScript
K. Kilian Lindberg

Meine 2 Cent. Gleich aber anders…

<script>
    dosomething("blaha", function(){
        alert("Yay just like jQuery callbacks!");
    });


    function dosomething(damsg, callback){
        alert(damsg);
        if(typeof callback == "function") 
        callback();
    }
</script>

  • Ich liebe diesen Ausschnitt, danach habe ich gesucht

    – Vimal1083

    13. März 2014 um 17:23 Uhr

1647264310 653 Erstellen Sie einen benutzerdefinierten Ruckruf in JavaScript
Arun Bahal

function loadData(callback) {

    //execute other requirement

    if(callback && typeof callback == "function"){
        callback();
   }
}

loadData(function(){

   //execute callback

});

Erstellen Sie einen benutzerdefinierten Ruckruf in JavaScript
Eyad Farra

   function callback(e){
      return e;
   }
    var MyClass = {
       method: function(args, callback){
          console.log(args);
          if(typeof callback == "function")
          callback();
       }    
    }

============================================

MyClass.method("hello",function(){
    console.log("world !");
});

============================================

Ergebnis ist:

hello world !

1647264311 986 Erstellen Sie einen benutzerdefinierten Ruckruf in JavaScript
Dan Bray

Einige der Antworten sind zwar richtig, aber vielleicht etwas schwierig zu verstehen. Hier ist ein Beispiel in Laiensprache:

var users = ["Sam", "Ellie", "Bernie"];

function addUser(username, callback)
{
    setTimeout(function()
    {
        users.push(username);
        callback();
    }, 200);
}

function getUsers()
{
    setTimeout(function()
    {
        console.log(users);
    }, 100);
}

addUser("Jake", getUsers);

Der Rückruf bedeutet, dass “Jake” immer zu den Benutzern hinzugefügt wird, bevor die Liste der Benutzer mit angezeigt wird console.log.

Quelle (Youtube)

Wenn Sie eine Funktion ausführen möchten, wenn etwas erledigt ist. Eine gute Lösung ist das Anhören von Ereignissen. Zum Beispiel implementiere ich a Dispatcherein DispatcherEvent Klasse mit ES6,dann:

let Notification = new Dispatcher()
Notification.on('Load data success', loadSuccessCallback)

const loadSuccessCallback = (data) =>{
   ...
}
//trigger a event whenever you got data by
Notification.dispatch('Load data success')

Dispatcher:

class Dispatcher{
  constructor(){
    this.events = {}
  }

  dispatch(eventName, data){
    const event = this.events[eventName]
    if(event){
      event.fire(data)
    }
  }

  //start listen event
  on(eventName, callback){
    let event = this.events[eventName]
    if(!event){
      event = new DispatcherEvent(eventName)
      this.events[eventName] = event
    }
    event.registerCallback(callback)
  }

  //stop listen event
  off(eventName, callback){
    const event = this.events[eventName]
    if(event){
      delete this.events[eventName]
    }
  }
}

DispatcherEvent:

class DispatcherEvent{
  constructor(eventName){
    this.eventName = eventName
    this.callbacks = []
  }

  registerCallback(callback){
    this.callbacks.push(callback)
  }

  fire(data){
    this.callbacks.forEach((callback=>{
      callback(data)
    }))
  }
}

Viel Spaß beim Codieren!

p/s: Mein Code fehlt, behandelt einige Fehlerausnahmen

1001710cookie-checkErstellen Sie einen benutzerdefinierten Rückruf in JavaScript

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy