Créer un callback personnalisé en JavaScript

Question

Tout ce dont j'ai besoin est d'exécuter une fonction de rappel lorsque l'exécution de ma fonction actuelle se termine.

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

Un consommateur pour cette fonction devrait être comme ceci :

object.LoadData(success);

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

Comment puis-je mettre cela en œuvre ?

Answer 1

En fait, votre code fonctionnera à peu près tel quel, il suffit de déclarer votre callback comme un argument et vous pouvez l'appeler directement en utilisant le nom de l'argument.

L'essentiel

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);

Cela appellera doSomething qui appellera foo qui signalera "les choses vont ici".

Notez qu'il est très important de passer la fonction référence ( foo ), plutôt que d'appeler la fonction et de transmettre son résultat ( foo() ). Dans votre question, vous le faites correctement, mais cela vaut la peine d'être signalé car c'est une erreur courante.

Trucs plus avancés

Parfois, vous voulez appeler le callback pour qu'il voit une valeur spécifique de this . Vous pouvez facilement le faire avec le JavaScript call fonction :

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`

Vous pouvez également passer des arguments :

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`

Il est parfois utile de passer les arguments que vous voulez donner à la callback sous forme de tableau, plutôt qu'individuellement. Vous pouvez utiliser apply pour le faire :

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`

Answer 2

Il est bon de s'assurer que la callback est une fonction réelle avant de tenter de l'exécuter :

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

  callback();
}

Answer 3

Mes deux centimes. Identique mais différent...

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

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

Answer 4

   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 !");
});

\==============================================

Le résultat est :

hello world !

Answer 5

function LoadData(callback) 
{
    alert('the data have been loaded');
    callback(loadedData, currentObject);
}