JavaScript Esempi di utilizzo di callback semplici

Esempio

Le callback offrono un modo per estendere la funzionalità di una funzione (o metodo) senza modificarne il codice. Questo approccio è spesso usato nei moduli (librerie / plugin), il cui codice non dovrebbe essere modificato.

Supponiamo di aver scritto la seguente funzione, calcolando la somma di una data matrice di valori:

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

Supponiamo ora di voler fare qualcosa con ogni valore dell'array, ad esempio visualizzarlo usando alert() . Potremmo apportare le modifiche appropriate nel codice di foo , come questo:

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

Ma cosa succede se decidiamo di utilizzare console.log anziché alert() ? Ovviamente cambiare il codice di foo , ogni volta che decidiamo di fare qualcos'altro con ogni valore, non è una buona idea. È molto meglio avere l'opzione di cambiare idea senza cambiare il codice di foo . Questo è esattamente il caso d'uso per i callback. Dobbiamo solo cambiare leggermente la firma e il corpo di foo :

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

E ora siamo in grado di cambiare il comportamento di foo cambiando semplicemente i suoi parametri:

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

Esempi con funzioni asincrone

In jQuery, il metodo $.getJSON() per recuperare i dati JSON è asincrono. Pertanto, il codice di passaggio in una richiamata garantisce che il codice venga chiamato dopo che è stato recuperato il JSON.

$.getJSON() :

$.getJSON( url, dataObject, successCallback );

Esempio di codice $.getJSON() :

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

Quanto segue non funzionerebbe, perché il codice per la gestione dei dati verrebbe probabilmente chiamato prima che i dati vengano effettivamente ricevuti, poiché la funzione $.getJSON richiede un intervallo di tempo non specificato e non regge lo stack di chiamate mentre attende il JSON.

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

Un altro esempio di una funzione asincrona è la funzione animate() di jQuery. Poiché richiede un tempo specifico per eseguire l'animazione, a volte è preferibile eseguire del codice direttamente dopo l'animazione.

sintassi .animate() :

jQueryElement.animate( properties, duration, callback );

Ad esempio, per creare un'animazione in dissolvenza dopo la quale l'elemento scompare completamente, è possibile eseguire il codice seguente. Notare l'uso del callback.

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

Ciò consente di nascondere l'elemento subito dopo che la funzione ha terminato l'esecuzione. Questo differisce da:

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

perché quest'ultimo non aspetta che animate() (una funzione asincrona) completi, e quindi l'elemento è nascosto subito, producendo un effetto indesiderato.