setTimeout di JavaScript è un metodo che permette di chiamare una funzione dopo un certo periodo di tempo, espresso in millisecondi.
La sintassi di questo metodo è:
setTimeout(funzione, millisecondi, p1, p2, …), dove sia i millisecondi, sia p1 e p2 sono parametri opzionali.
La funzione, obbligatoria, sarà eseguita dopo che sarà trascorso il tempo indicato in millisecondi, altrimenti dopo 0 secondi, se questo parametro non è specificato. Dunque 0 è il valore di default.
JavaScript non è multi thread ma a thread singolo, cioè può eseguire una sola attività alla volta in un determinato momento.
Il motore JavaScript esegue quindi il codice dall’alto verso il basso, si dice dunque che è sincrono. Attraverso le callback, promises e i metodi come il setTimeout, JavaScript svolge delle attività asincrone.
Il browser web ha come componenti oltre al motore JavaScript anche gli Event Loop, Call Stack e API Web.
Quando utilizziamo setTimeout il motore di JavaScript inserisce nella Call Stack il contesto di esecuzione che esso crea. In questo modo si crea un timer nel componente Web API del nostro browser web. Quando il tempo trascorre la funzione di callback, passata come argomento al metodo setTimeout, viene inserita in una queue (coda).
L’event loop controlla sia lo stack che la coda, rimuove la funzione di callback dalla coda, la pone nello stack e dunque la funzione viene eseguita.
setTimeout JavaScript – Primo esempio
Realizziamo due funzioni citazione e altraCitazione.
La prima è una funzione che contiene il metodo setTimeout che ha come primo parametro una funzione di callback che attiva semplicemente un alert con una famosa citazione del film “The Imitation Game“. Il secondo parametro invece rappresenta il tempo in millisecondi. Quindi la funzione, quando richiamata, partirà dopo 2 secondi.
La seconda funzione invece è una funzione che contiene un altro alert con un’altra citazione, diversa dalla precedente e che non ha termini di tempo.
Ecco dunque il codice completo d’uso del metodo setTimeout in JavaScript:
citazione();
altraCitazione();
function citazione() {
// parte dopo 2 secondi
setTimeout (function () {
alert('Sono le persone che nessuno immagina che possano fare certe cose quelle che fanno cose che nessuno può immaginare!');
}, 2000);
}
function altraCitazione () {
alert('Le persone non dicono mai quello che vogliono dire, dicono sempre altro. Eppure si aspettano che tu le capisca ...');
}
Anche se prima è richiamata la funzione citazione, partirà per prima la funzione altraCitazione in quanto non ha restrizioni di tempo.
setTimeout JavaScript e clearTimeout
Creiamo un semplice conteggio che stopperemo con il metodo clearTimeout.
Prepariamo la nostra pagina HTML con questo semplice codice:
Dunque utilizzo uno span dove andrò a mettere i numeri progressivi ed un pulsante per fermare il tutto.
Dopo programmo in JavaScript il mio algoritmo.
Inizializziamo la variabile conteggio a 0 e salviamo in una variabile di nome mioTimer il timer creato.
Dentro la funzione di callback incrementeremo la variabile conteggio e poi richiamiamo ricorsivamente il metodo setTimeout in modo da produrre gli incrementi successivi. Diamo il tempo di 1 secondo.
Quando cliccheremo il pulsante stop richiamiamo la funzione stopCount che provvederà a richiamare il metodo clearTimeout sulla variabile mioTimer.
Ecco dunque il codice completo che utilizza i metodi setTimeout e clearTimeout di JavaScript:
var conteggio = 0;
var mioTimer = setTimeout(function timer() {
document.getElementById("conta").innerHTML = ++conteggio;
mioTimer = setTimeout(timer, 1000);
}, 1000);
var stop = document.getElementById('stop');
stop.addEventListener('click',function (){
stopCount();
});
function stopCount() {
clearTimeout(mioTimer );
}
Nella prossima lezione parleremo ancora di timer utilizzando il metodo setInterval.
Le function callback sono utilizzate in JavaScript per far si che il codice sia asincrono, cioè eseguito dopo un determinato evento, come ad esempio quando un pulsante è cliccato, oppure quando si passa sopra un elemento della pagina html, ecc..
Abbiamo anche visto nei precedenti articoli che le funzioni di callback possono essere passate come argomenti alle funzioni, in quanto sono degli oggetti.
In questo articolo faremo ancora qualche esempio per comprenderne meglio l’utilizzo.
Interessante è infatti il loro utilizzo con altri metodi predefiniti, come nel primo esempio sotto.
Function callback – primo esempio
Togliamo da un array, precedentemente popolato, gli elementi dispari.
Innanzitutto creiamo il nostro array di numeri.
Dopo creiamo una function anonima in JavaScript che memorizziamo in una variabile numero.
Quindi nella variabile numero stiamo memorizzando la nostra funzione di callback, che rappresenta il nostro oggetto.
Poi filtriamo l’array utilizzando il metodo filter che richiama la nostra function di callback in Javascript, che è stata creata per restituire true se un elemento è pari.
La funzione di callback prende un solo parametro che rappresenta ogni singolo elemento dell’array che deve essere valutato.
La funzione è poi richiamata senza parentesi tonde all’interno del metodo filter.
var array = [5,7,8,9,10];
var numero = function (n) {
if(n% 2 == 0){
return true;
}
};
//numero diventa la funzione che posso richiamare, dunque:
var n = array.filter(numero);
console.log(n);
Il console.log stamperà l’array con i soli numeri pari.
La stessa funzione si può scrivere anche in questo modo:
var array = [5,7,8,9,10];
var n = array.filter(function (n) {
if(n% 2 == 0){
return true;
}
});
console.log(n);
Function callback – secondo esempio
Inseriamo 5 numeri in un array al clik del pulsante e dopo visualizziamo la loro somma.
Anche in questo caso utilizziamo una funzione di callback anonima dentro la quale richiamiamo le funzioni chiediNumeri e sommaNumeri.
La funzione chiediNumeri ha come argomenti un array e la quantità dei numeri da inserire, mentre la funzione sommaNumeri prende come argomento l’array.
Ecco il codice completo della nostra function callback e delle funzioni da noi create:
var numeri = [];
var calcolo = document.getElementById('calcolo');
calcolo.addEventListener('click',function (){
chiediNumeri(numeri, 5);
var sum = sommaNumeri(numeri);
alert('la somma è: ', sum);
});
function chiediNumeri(arr, q){
while (arr.length < q){
var n = parseInt(prompt('Inserisci un numero'));
arr.push(n);
}
return arr;
}
function sommaNumeri(array){
var somma = 0;
for (var i = 0; i< array.length; i++){
somma += array[i];
}
return somma;
}
Abbiamo svolto alcuni esercizi sulle function di callback in JavaScript, nelle prossime lezione torneremo su questo argomento.
Le funzioni di callback in JavaScript, come visto nella lezione precedente, possono essere passate come argomenti di altre funzioni.
Difatti le funzioni in JavaScript sono degli oggetti. Lo possiamo vedere anche semplicemente facendo il console.log di una funzione.
Se ad esempio abbiamo questa funzione JavaScript:
var numero = function (item) {
return 10;
};
console.log(numero);
facendo il console.log() della variabile numero vedremo che è un oggetto, come da figura sotto:
Le funzioni di callback possono essere anonime oppure avere un nome. L’ovvio vantaggio nell’avere un nome è che possono essere richiamate in altre porzioni di codice, oltre a rendere il codice più leggibile.
Perché sono utili le callback in JavaScript?
Come sappiamo JavaScript esegue il codice in sequenza, e talvolta abbiamo bisogno di eseguire il codice dopo che si verifica qualcos’altro. Cioè abbiamo bisogno di eseguire qualcosa di asincrono!
Le funzioni di callback permettono di eseguire il codice solo dopo aver completato determinate azioni. Quindi sono richiamate dopo aver completato un’attività.
Callback JavaScript – esempio
Facciamo un altro semplice esempio di una funzione di callback utilizzata per il calcolo dell’area del rettangolo al click di un pulsante.
In JavaScript programmiamo la funzione di callback areaRettangolo.
Ecco dunque il codice completo:
var calcolo = document.getElementById('calcolo');
calcolo.addEventListener('click',areaRettangolo);
function areaRettangolo(a,b){
a = parseInt(prompt('Inserisci il valore della base'));
b = parseInt(prompt('Inserisci il valore dell\'altezza'));
alert(a*b);
}
Quindi solo dopo aver cliccato sul pulsante si avvierà la funzione areaRettangolo che dunque attende che il click sia terminato.
Fate la prova a non rilasciare subito il pulsante del mouse.
Notate come, dopo la funzione di callback areaRettangolo, non sono presenti le parantesi tonde.
Facciamo una piccola variazione dell’esempio precedente, in modo da creare un’ulteriore funzione per la stampa dell’area del rettangolo.
Quindi la funzione areaRettangolo restituirà solo il calcolo dell’area mentre la funzione stampaArea, che ha come argomento solo la funzione areaRettangolo, stamperà il risultato.
Ecco dunque il codice completo che mostra l’utilizzo della funzione di callback con nome:
var calcolo = document.getElementById('calcolo');
calcolo.addEventListener('click',stampaArea);
function areaRettangolo(a,b){
return a*b;
}
function stampaArea(){
let base = parseInt(prompt('Inserisci il valore della base'));
let altezza = parseInt(prompt('Inserisci il valore dell\'altezza'));
stampa = areaRettangolo(base,altezza);
alert(stampa);
}
Il codice precedente si può scrivere anche tramite una funzione di callback anonima in JavaScript:
var calcolo = document.getElementById('calcolo');
calcolo.addEventListener('click',function (){
let base = parseInt(prompt('Inserisci il valore della base'));
let altezza = parseInt(prompt('Inserisci il valore dell\'altezza'));
stampa = areaRettangolo(base,altezza);
alert(stampa);
});
function areaRettangolo(a,b){
return a*b;
}
In questa lezione abbiamo approfondito le funzioni di callback in JavaScript continueremo a parlarne nel prossimo articolo.
Creiamo delle funzioni per il calcolo dell’area del rettangolo e dell’area del triangolo. Entrambe le funzioni restituiscono un valore di ritorno che corrisponde all’area della nostra figura geometrica.
Dopo creiamo una nuova funzione area a cui passeremo due argomenti che rappresentano la base e l’altezza delle nostre figure geometriche ed un terzo argomento che è la nostra funzione di callback. La funzione deve essere passata senza parentesi tonde, come abbiamo più volte detto nelle precedenti lezioni.
Questa funzione restituisce la funzione di callback stessa richiamata sui due parametri x e y.
Richiamiamo la funzione area una volta per calcolare l’area del rettangolo, un’altra volta per calcolare l’area del triangolo.
Dapprima facciamo l’esempio con dei valori costanti, dopo li inseriremo tramite un semplice prompt.
Di seguito ecco il codice completo del nostro primo esempio sulle funzioni di callback:
alert('L\'area del rettangolo è ' + area(5, 15, areaRettangolo));
// richiama la funzione area con 3 argomenti di cui l'ultimo è la funzione di callback
alert('L\'area del triangolo è ' + area(5, 15, areaTriangolo));
var num1 = parseInt(prompt('Inserisci un numero'));
var num2 = parseInt(prompt('Inserisci un numero'));
alert('L\'area del rettangolo è ' + area(num1, num2, areaRettangolo));
alert('L\'area del triangolo è ' + area(num1, num2, areaTriangolo));
//**** funzioni ****//
function area(x, y, callback) {
return callback(x, y);
}
function areaRettangolo(a,b) {
return a*b;
}
function areaTriangolo(a,b){
return a*b/2;
}
Esempi funzioni di callback – secondo esempio
In questo secondo esempio utilizziamo una semplice funzione saluto che serve a visualizzare il saluto tramite un alert.
Dopo realizziamo una funzione datiIntput che prende come argomento una funzione di callback. Questa funzione chiederà di prendere in input dei dati che poi passerà alla stessa funzione di callback.
Quindi richiamiamo la nostra funzione datiInput a cui passeremo come argomento la funzione saluto.
Questo esempio è molto comodo soprattutto nel caso in cui dobbiamo ad esempio modificare l’alert con un console.log oppure un getElementById. In questo modo non tocco la funzione principale ma modifico solo la funzione saluto per mostrare un tipo di output diverso.
datiIntput(saluto);
function saluto(nome, cognome) {
alert('Benvenuto ' + nome + ' ' + cognome);
}
function datiIntput(callback) {
var n = prompt('Inserisci il tuo nome');
var c = prompt('Inserisci il tuo cognome');
callback(n,c);
}
In questa lezione ho proposto degli esempi sulle funzioni di callback, tornerò presto a proporre tanti altri esercizi.
In questa lezione parleremo delle funzioni di callback in JavaScript, che sono delle funzioni che vengono passate come parametri ad altre funzioni.
Nella versione JavaScript ES5 sono molto utilizzate, mentre nella ES6 lasciano spazio alle promise che sono diventate un componente nativo del linguaggio. Qualche anno fa infatti le promise venivano usate solo grazie a delle librerie esterne.
Le funzioni di callback derivano da un paradigma di programmazione noto come programmazione funzionale.
Inoltre è bene ricordare che, quando passiamo una funzione di callback come argomento ad un’altra funzione, non stiamo eseguendo la funzione, ma stiamo solo passando la definizione della funzione. Quindi non dobbiamo utilizzare le parentesi tonde, così come facciamo quando invece eseguiamo una funzione.
Le funzioni di callback in JavaScript – primo esempio
In questo primo esempio utilizzeremo una semplice funzione per la somma di 2 numeri e poi la passeremo come parametro ad un’altra funzione.
Ecco dunque il codice della nostra funzione che semplicemente prende 2 numeri e ritorna la loro somma:
function somma (a,b){
return a + b;
}
La funzione a cui passeremo la nostra funzione come argomento, dunque senza parentesi la chiameremo richiamaCallBack semplicemente per far capire che richiama una funzione di callback:
function richiamaCallBack(callback){
var numero1 = parseInt(prompt('Inserisci un numero'));
var numero2 = parseInt(prompt('Inserisci un numero'));
alert(callback(numero1,numero2));
}
Adesso richiamiamo la funzione:
richiamaCallBack(somma);
Se provate lo script noterete che comparirà un alert dove sarà visibile la somma dei due numeri presi in input. In alternativa provate con il console.log() al posto dell’alert!
Le funzioni di callback in JavaScript – secondo esempio
In questo secondo esempio realizzeremo una funzione pariDispari che restituisce true se un valore passato come argomento è pari, altrimenti restituisce false.
Dopo alla nostra funzione richiamaCallBack passeremo come argomenti un numero e la funzione appena creata, senza parentesi, e se il numero passato è pari stamperemo la stringa ‘numero pari‘, altrimenti stamperemo ‘numero dispari‘.
function pariDispari(item) {
//funzione che verrà poi passata come argomento senza parentesi
if (item % 2 == 0){
return true;
} else {
return false;
}
}
function richiamaCallBack(x,callback){
//i parametri sono un numero e una funzione
if (callback(x)) {
console.log('numero pari');
} else {
console.log('numero dispari');
}
return x;
}
for (var i = 0; i< 10; i++){
var n = parseInt(prompt('inserisci un numero intero'));
var y = richiamaCallBack(n,pariDispari);//richiamo la funzione senza parentesi
console.log(y);
}
Le funzioni di callback in JavaScript - terzo esempio
In questo terzo esempio popoleremo un array di soli numeri maggiori o uguali a zero (scartiamo solo i negativi), utilizzando ancora le funzioni di callback.
Quindi creiamo la nostra funzione positivoNegativo che restituisce un valore booleano. Dopo creiamo la funzione popolaArray a cui passiamo come argomento un numero, un array e una funzione (dunque vi ricordo senza parentesi), e aggiungiamo l'elemento nell'array solo se positivo. Questa funzione restituisce il nostro array.
Infine tramite un ciclo for chiediamo un numero e richiamiamo la funzione popolaArray con i nostri parametri.
Se facciamo il console.log possiamo vedere il nostro array popolato con soli numeri maggiori o uguali a zero.
function positivoNegativo(item) {
//funzione che verrà poi passata come argomento senza parentesi
if (item >= 0){
return true;
} else {
return false;
}
}
function popolaArray(x,array,callback){
//dove i parametri sono un numero, un array e una funzione
if (callback(x)) {
console.log('numero positivo lo inserisco nell\'array');
array.push(x);
} else {
console.log('numero negativo non lo inserisco nell\'array');
}
return array; //restituisce l'array
}
var numeri = [];
for (var i = 0; i< 10; i++){
var n = parseInt(prompt('inserisci un numero intero'));
var y = popolaArray(n,numeri,positivoNegativo);
//richiamo la funzione senza parentesi
console.log(y);
}
console.log('array finale' , numeri);
In questo articolo abbiamo visto dei semplici esempi d'uso delle funzioni di callback in JavaScript, nelle prossime lezioni proporrò tanti altri esempi pratici.
Commenti recenti