Erstellen Sie einen benutzerdefinierten Rückruf in JavaScript

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?

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`

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

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

  callback();
}

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>

function loadData(callback) {

    //execute other requirement

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

loadData(function(){

   //execute callback

});

   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 !

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