In questo tutorial imparerai a conoscere le funzioni di callback JavaScript con l'aiuto di esempi.
Una funzione è un blocco di codice che esegue una determinata attività quando viene chiamata. Per esempio,
// function function greet(name) ( console.log('Hi' + ' ' + name); ) greet('Peter'); // Hi Peter
Nel programma precedente, un valore stringa viene passato come argomento alla greet()funzione.
In JavaScript, puoi anche passare una funzione come argomento a una funzione. Questa funzione che viene passata come argomento all'interno di un'altra funzione è chiamata funzione di callback. Per esempio,
// function function greet(name, callback) ( console.log('Hi' + ' ' + name); callback(); ) // callback function function callMe() ( console.log('I am callback function'); ) // passing function as an argument greet('Peter', callMe);
Produzione
Ciao Peter, sono la funzione di richiamata
Nel programma sopra, ci sono due funzioni. Durante la chiamata della greet()funzione, vengono passati due argomenti (un valore stringa e una funzione).
La callMe()funzione è una funzione di callback.
Vantaggio della funzione di richiamata
Il vantaggio dell'utilizzo di una funzione di callback è che è possibile attendere il risultato di una precedente chiamata di funzione e quindi eseguire un'altra chiamata di funzione.
In questo esempio, utilizzeremo il setTimeout()metodo per imitare il programma che richiede tempo per essere eseguito, come i dati provenienti dal server.
Esempio: programma con setTimeout ()
// program that shows the delay in execution function greet() ( console.log('Hello world'); ) function sayName(name) ( console.log('Hello' + ' ' + name); ) // calling the function setTimeout(greet, 2000); sayName('John');
Produzione
Hello John Hello world
Come sapete, il metodo setTimeout () esegue un blocco di codice dopo il tempo specificato.
Qui, la greet()funzione viene chiamata dopo 2000 millisecondi ( 2 secondi). Durante questa attesa, sayName('John');viene eseguito. Ecco perché Hello John viene stampato prima di Hello world.
Il codice sopra viene eseguito in modo asincrono (la seconda funzione; sayName()non attende la prima funzione; greet()per completare).
Esempio: utilizzo di una funzione di richiamata
Nell'esempio precedente, la seconda funzione non attende il completamento della prima funzione. Tuttavia, se si desidera attendere il risultato della chiamata di funzione precedente prima che venga eseguita l'istruzione successiva, è possibile utilizzare una funzione di callback. Per esempio,
// Callback Function Example function greet(name, myFunction) ( console.log('Hello world'); // callback function // executed only after the greet() is executed myFunction(name); ) // callback function function sayName(name) ( console.log('Hello' + ' ' + name); ) // calling the function after 2 seconds setTimeout(greet, 2000, 'John', sayName);
Produzione
Hello world Hello John
Nel programma precedente, il codice viene eseguito in modo sincrono. La sayName()funzione viene passata come argomento alla greet()funzione.
Il setTimeout()metodo esegue la greet()funzione solo dopo 2 secondi. Tuttavia, la sayName()funzione attende l'esecuzione della greet()funzione.
Nota : la funzione di richiamata è utile quando è necessario attendere un risultato che richiede tempo. Ad esempio, i dati provenienti da un server perché ci vuole tempo prima che i dati arrivino.
