web-dev-qa-db-fra.com

Mieux comprendre les fonctions de rappel en JavaScript

Je comprends que le transfert d’une fonction à une autre fonction sous forme de rappel et l’exécution s’effectue, mais je ne comprends pas la meilleure implémentation pour le faire. Je cherche un exemple très basique, comme ceci:

var myCallBackExample = {
    myFirstFunction : function( param1, param2, callback ) {
        // Do something with param1 and param2.
        if ( arguments.length == 3 ) {
            // Execute callback function.
            // What is the "best" way to do this?
        }
    },
    mySecondFunction : function() {
        myFirstFunction( false, true, function() {
            // When this anonymous function is called, execute it.
        });
    }
};

Dans myFirstFunction, si je renvoie un nouveau callback (), cela fonctionne et exécute la fonction anonyme, mais cela ne semble pas être la bonne approche pour moi.

javascriptfunctioncallback
163
user4903

Tu peux juste dire

callback();

Vous pouvez également utiliser la méthode call si vous souhaitez ajuster la valeur de this dans le rappel.

callback.call( newValueForThis);

Dans la fonction this serait ce que newValueForThis est.

131
krosenvold

Vous devriez vérifier si le rappel existe et est une fonction exécutable:

if (callback && typeof(callback) === "function") {
    // execute the callback, passing parameters as necessary
    callback();
}

De nombreuses bibliothèques (jQuery, dojo, etc.) utilisent un modèle similaire pour leurs fonctions asynchrones, ainsi que node.js pour toutes les fonctions asynchrones (nodejs transmet généralement error et data au rappel). . Regarder dans leur code source pourrait aider!

90
arunjitsingh

Il y a 3 possibilités principales pour exécuter une fonction:

var callback = function(x, y) {
    // "this" may be different depending how you call the function
    alert(this);
};
  1. rappel (argument_1, argument_2);
  2. callback.call (some_object, argument_1, argument_2);
  3. callback.apply (some_object, [argument_1, argument_2]);

La méthode que vous choisissez dépend si:

  1. Vous avez les arguments stockés dans un tableau ou sous forme de variables distinctes.
  2. Vous voulez appeler cette fonction dans le contexte d'un objet. Dans ce cas, utiliser le mot clé "this" dans ce rappel ferait référence à l'objet transmis en tant qu'argument dans call () ou apply (). Si vous ne souhaitez pas transmettre le contexte de l'objet, utilisez null ou undefined. Dans ce dernier cas, l'objet global serait utilisé pour "ceci".

Docs pour Function.call , Function.apply

34
Ionuț G. Stan

Les rappels concernent les signaux et le terme "nouveau" concerne la création d'instances d'objet.

Dans ce cas, il serait encore plus approprié d'exécuter simplement "callback ();" que "return new callback ()" car de toute façon, vous ne faites rien avec une valeur de retour.

(Et le test arguments.length == 3 est vraiment maladroit, mieux vaut vérifier que le paramètre callback existe et est une fonction.)

6
annakata

la bonne mise en œuvre serait:

if( callback ) callback();

cela rend le paramètre de rappel facultatif.

6
faeb187

Vous pouvez utiliser:

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

L'exemple ci-dessous est un peu plus complet:

function mySandwich(param1, param2, callback) {
  alert('Started eating my sandwich.\n\nIt has: ' + param1 + ', ' + param2);
  var sandwich = {
      toppings: [param1, param2]
    },
    madeCorrectly = (typeof(param1) === "string" && typeof(param2) === "string") ? true : false;
  if (callback && typeof(callback) === "function") {
    callback.apply(sandwich, [madeCorrectly]);
  }
}

mySandwich('ham', 'cheese', function(correct) {
  if (correct) {
    alert("Finished eating my " + this.toppings[0] + " and " + this.toppings[1] + " sandwich.");
  } else {
    alert("Gross!  Why would I eat a " + this.toppings[0] + " and " + this.toppings[1] + " sandwich?");
  }
});
2
Hasan A Yousef
function checkCallback(cb) {
  if (cb || cb != '') {
    if (typeof window[cb] === 'undefined') alert('Callback function not found.');
    else window[cb].call(this, Arg1, Arg2);
  }
}
1
Aamir Afridi

Voici un exemple de base qui explique la fonction callback() en JavaScript:

var x = 0;

function testCallBack(param1, param2, callback) {
  alert('param1= ' + param1 + ', param2= ' + param2 + ' X=' + x);
  if (callback && typeof(callback) === "function") {
    x += 1;
    alert("Calla Back x= " + x);
    x += 1;
    callback();
  }
}

testCallBack('ham', 'cheese', function() {
  alert("Function X= " + x);
});

JSFiddle

1
BERGUIGA Mohamed Amine