JavaScript Exemples d'utilisation de rappel simple


Exemple

Les rappels offrent un moyen d'étendre les fonctionnalités d'une fonction (ou d'une méthode) sans changer son code. Cette approche est souvent utilisée dans les modules (bibliothèques / plugins), dont le code n'est pas censé être modifié.

Supposons que nous ayons écrit la fonction suivante, en calculant la somme d'un tableau de valeurs donné:

function foo(array) {
    var sum = 0;
    for (var i = 0; i < array.length; i++) {
        sum += array[i];
    }
    return sum;
}

Supposons maintenant que nous voulons faire quelque chose avec chaque valeur du tableau, par exemple en l’affichant avec alert() . Nous pourrions apporter les modifications appropriées dans le code de foo , comme ceci:

function foo(array) {
    var sum = 0;
    for (var i = 0; i < array.length; i++) {
        alert(array[i]);
        sum += array[i];
    }
    return sum;
}

Mais que se passe-t-il si nous décidons d’utiliser console.log au lieu de alert() ? Évidemment, changer le code de foo , chaque fois que nous décidons de faire autre chose avec chaque valeur, n'est pas une bonne idée. Il est préférable d'avoir la possibilité de changer d'avis sans changer le code de foo . C'est exactement le cas d'utilisation des rappels. Il suffit de modifier légèrement la signature et le corps de foo :

function foo(array, callback) {
    var sum = 0;
    for (var i = 0; i < array.length; i++) {
        callback(array[i]);
        sum += array[i];
    }
    return sum;
}

Et maintenant, nous pouvons changer le comportement de foo en changeant simplement ses paramètres:

var array = [];
foo(array, alert);
foo(array, function (x) {
    console.log(x);
});

Exemples avec des fonctions asynchrones

Dans jQuery, la $.getJSON() pour récupérer les données JSON est asynchrone. Par conséquent, le passage de code dans un rappel garantit que le code est appelé après la récupération du fichier JSON.

$.getJSON() syntaxe:

$.getJSON( url, dataObject, successCallback );

Exemple de $.getJSON() :

$.getJSON("foo.json", {}, function(data) {
    // data handling code
});

Ce qui suit ne fonctionnerait pas , car le code de traitement des données serait probablement appelé avant que les données ne soient réellement reçues, car la fonction $.getJSON prend un temps indéterminé et ne retient pas la pile des appels en attente du JSON.

$.getJSON("foo.json", {});
// data handling code

Un autre exemple de fonction asynchrone est la fonction animate() de jQuery. Comme il faut un certain temps pour exécuter l'animation, il est parfois souhaitable d'exécuter du code directement après l'animation.

.animate() syntaxe:

jQueryElement.animate( properties, duration, callback );

Par exemple, pour créer une animation de fondu après laquelle l'élément disparaît complètement, le code suivant peut être exécuté. Notez l'utilisation du rappel.

elem.animate( { opacity: 0 }, 5000, function() {
    elem.hide();
} );

Cela permet à l'élément d'être caché juste après l'exécution de la fonction. Cela diffère de:

elem.animate( { opacity: 0 }, 5000 );
elem.hide();

parce que ce dernier n'attend pas la fin de animate() (une fonction asynchrone) et que, par conséquent, l'élément est masqué immédiatement, produisant un effet indésirable.