Pubblicato il

javascript

callback

asincrone

funzioni

anonime

Le funzioni callback sono diventate uno dei concetti basi da conoscere se si vuole diventare uno sviluppatore JavaScript. Infatti il linguaggio JavaScript è fortemente basato sul concetto delle funzioni callback.

Se non siete a conoscenza dei il concetti di programmazione funzionale, parole come  funzioni anonime e callback potrebbero spaventarvi, ma una volta capito il loro meccanismo, vedrete che non c’è nulla da temere.

Prima di parlare di funzioni anonime e callback paliamo di come funziona normalmente una funzione in JavaScript.

Prendiamo questa funzione esempio: (mi dispiace se odiate i gatti :/ ce ne saranno un po’ in questo post)


var mostra_gatti = function(gatto){
    console.log(gatto);
}
mostra_gatti("Romeo");

Come sapete questa funzione prende come input una Stringa e la mostra in output nella console, come farebbe una normale funzione.
Ma il linguaggio JavaScript ci da l’occasione di fare le cose in modo diverso. Infatti in JS anziché aspettare che una funzione finisca di fare il suo lavoro, possiamo usare le funzioni di callback per lavorare in modo asincrono.

Cosa vuol dire lavorare in modo asincrono?

Una funzione asincrona non blocca il nostro codice JS (Browser). In altre parole se eseguiamo una funzione asincrona, questa lavorerà nel background del nostro programma principale. In questo modo possiamo usare funzioni pesanti che possono impiegare tanto tempo (per esempio funzioni AJAX), senza bloccare altri eventi JavaScript.

Adesso immaginiamo di non avere a disposizione una lista dei gatti, dovremo quindi fare una richiesta ad un server per ricevere la lista dei nostri amati felini.

Se immaginiamo di avere una lista molto grande, oppure una lista di gatti generata dinamicamente, la risposta dal server potrebbe impiegare molto tempo per raggiungere il nostro client.

E se la nostra funzione è sincrona, questa come una vera diva, bloccherà tutto finche non ha completato il suo lavoro, mettendo in pausa il resto. Durante questo periodo non sarà possibile alcuna interazione Client – JS

Per evitare che questo accada useremo quindi una funzione asincrona per ottenere la nostra lista.

Cosa sono le funzioni callback in JavaScript?

Le funzioni in JavaScript sono veri e propri Oggetti, questo vuol dire che godono delle stesse proprietà di cui godono le comuni variabili JS. Possiamo quindi passare una funzione come parametro di un’altra funzione.

Per esempio in JavaScript è possibile fare:

var mostra_gatti = function(){…}
var prendi_gatti = function(callback);
prendi_gatti(mostra_gatti); // passiamo prendi_gatti come parametro di mostra_gatti

In questo esempio stiamo chiamando una funzione dichiarata. (Non anonima)

Possiamo fare la stessa cosa utilizzando funzioni anonime, ovvero funzioni dichiarate nello stesso momento in cui vengono utilizzate. Ora vediamo lo stesso programma utilizzando una funzione anonima.

var prendi_gatti = function(callback){…};
prendi_gatti( function(){…} );

Ma se la nostra funzione è in esecuzione in background, Il problema che ci sorge è come facciamo a sapere quando la funzione ha finito ed è pronta per stampare la lista dei gatti?

Come usare le funzioni callback in JavaScript

Ecco dove entrano in gioco le funzioni callback. Infatti quando passiamo una funzione come parametro, possiamo specificare con precisione in che momento vogliamo mandarla in esecuzione.

Nel nostro caso quindi vogliamo mandare in output la nostra lista solamente quando riceviamo una risposta dal server.

Vediamo come: 


// in questo esempio facciamo una richiesta GET al nostro server e eseguiamo la nostra callback quando riceviamo una risposta dal server
var prendi_gatti = function(callback){
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.onreadystatechange = function() {
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200) // quando riceviamo una risposta
        callback(xmlHttp.responseText);
    }
    xmlHttp.open("GET", "www.prendiGatti.com", true); // true per asincrona
    xmlHttp.send(null);
}
var mostra_gatti = function(gatti){
    console.log(gatti);
}
prendi_gatti(mostra_gatti);

oppure utilizzando una funzione anonima:

// in questo esempio facciamo una richiesta GET al nostro server e eseguiamo la nostra callback quando riceviamo una risposta dal server
var prendi_gatti = function(callback){
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.onreadystatechange = function() {
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200) // quando riceviamo una risposta
        callback(xmlHttp.responseText);
    }
    xmlHttp.open("GET", "www.prendiGatti.com", true); // true per asincrona
    xmlHttp.send(null);
}
prendi_gatti(function(gatti){
    console.log(gatti);
});

Se mandiamo in esecuzione questo codice JavaScript otterremo una lista di gatti senza bloccare il browser nel processo.

Ora siete in grado di usare le funzioni asincrone con JS e siete a conoscenza di concetti come funzioni anonime e asincrone. Cosa aspettate a creare qualcosa di nuovo? Fatemi sapere nei commenti quali progetti avete in mente :)

condividete questa pagina con i vostri amici su Facebook o Twitter, o mettete mi piace alla nostra pagina Facebook Grazie mille e alla prossima  :)

Se hai una domanda puoi chiedere qualsiasi cosa nei commenti in basso

Grazie per aver letto questa guida su Devnews.it

Spero ti sia stata utile in qualche modo. Ti prego di supportare questa pagina mettendo mi piace alle nostre pagine social cliccando un basso, dove pubblichiamo regolermente notizie, tutorial e fatti curiosi sull'informatica. Grazie e ci vediamo alla prossima :)

Devnews

Devnews