Mieux comprendre les fonctions de rappel en JavaScript

Je comprends le passage d'une fonction à une autre fonction en tant que rappel et son exécution, mais je ne comprends pas la meilleure implémentation pour le faire. Je recherche un exemple très basique, comme celui-ci:

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 retourne new callback (), cela fonctionne et exécute la fonction anonyme, mais cela ne me semble pas être la bonne approche.

Tu peux juste dire

callback();

Vous pouvez également utiliser la callméthode si vous souhaitez ajuster la valeur de thisdans le rappel.

callback.call( newValueForThis);

À l'intérieur de la fonction se thistrouverait ce qui newValueForThisest.

Vous devez 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();
}

Beaucoup de bibliothèques (jQuery, Dojo, etc.) utilisent un modèle similaire pour leurs fonctions asynchrones, ainsi que Node.js pour toutes les fonctions asynchrones (NodeJS passe habituellement erroret dataau rappel). Examiner leur code source aiderait!

Il existe 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 (un_objet, argument_1, argument_2);
3. callback.apply (un_objet, [argument_1, argument_2]);

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

1. Vous avez les arguments stockés dans un tableau ou en tant que variables distinctes.
2. Vous souhaitez appeler cette fonction dans le contexte d'un objet. Dans ce cas, l'utilisation du mot clé "this" dans ce rappel ferait référence à l'objet passé en 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

Les rappels concernent les signaux et «nouveau» concerne la création d'instances d'objets.

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

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

la mise en œuvre appropriée serait:

if( callback ) callback();

cela rend le paramètre de rappel facultatif.

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

Voici un exemple de base qui explique la callback()fonction 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