Esempi funzioni di callback, callback in JavaScript esempi

In questa lezione propongo degli esempi d’uso delle funzioni di callback.

Abbiamo già trattato queste funzioni di callback nei seguenti articoli:

Function callback usate con i metodi JavaScript e con gli array

Esempi funzioni di callback – primo esempio

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.

Lezione precedente: funzione di callback approfondimenti

Lezione successiva: callback e setTimeout