Quali sono le funzioni di callback in JavaScript?

Se sei un programmatore, probabilmente hai sentito parlare di funzioni, che sono una serie di dichiarazioni che eseguono un'azione e restituiscono un output ma quali sono le funzioni di callback?

La funzione di callback è un concetto estremamente importante di JavaScript ed è ampiamente utilizzata in promesse, ascoltatori di eventi, array e molto altro ancora.

Esamineremo quali sono le funzioni di callback e come usarle in JavaScript in questo tutorial e parleremo anche delle funzioni di callback sincrone e asincrona. Per avere concetti chiari e profondi di funzioni di callback implementeremo anche alcuni esempi.

Funzione di callback

Una funzione di callback è una funzione che viene prima passata come argomento a un'altra funzione e deve essere eseguita dopo le dichiarazioni scritte in quella definizione della funzione e, come suggerisce il nome, viene eseguita in seguito all'interno della funzione. Per metterlo in parole semplici, viene eseguita una funzione di callback una volta elaborato l'effetto corrente.

Sintassi per la scrittura di una funzione di callback in JavaScript

La sintassi di base è:

funzione namefunc (callbackFunc)
callbackFunc ();

Questo è un funzione 'namefunc ()' ci vuole un funzione 'callbackfunc ()' ' come argomento. IL funzione 'callbackfunc ()' ' è chiamato dall'interno del funzione 'namefunc ()' Quindi è davvero una funzione di callback.

Esempio 1

Supponiamo di voler consolare.Registra un messaggio dopo 2 sec.

message funzione ()
console.log ("Hello World dopo 2 secondi");

setTimeout (Message, 2000);

IL funzione setTimeout () è un metodo integrato di JavaScript che prende un timer e una funzione di callback come argomento. Ora la funzione del messaggio (una funzione di callback) verrà chiamata e verrà eseguita quando scadrà il timer.

Nel codice sopra, il messaggio della funzione () viene approvato come argomento e viene chiamato dopo 2000 millisecondi (2 secondi). Ora per metterlo in relazione con la funzione di richiamata, la funzione Message () è stata chiamata dopo 2 secondi. Non è stato eseguito prima di quei 2 secondi. Quindi è una funzione di callback.

Necessità di funzioni di callback?

Devi pensare perché abbiamo anche bisogno di funzioni di callback. La risposta è semplice. JavaScript è un linguaggio sequenziale o a thread singolo, il che significa che esegue sequenzialmente riga per riga.

JavaScript non aspetta una risposta prima di passare alla riga successiva. Continuerà a eseguire e ascoltare altri eventi o righe di codice.

Per esempio:

Esempio2

Supponiamo che stiamo registrando 1 e 2 da due diverse funzioni alla console:

funzione firstMessage ()
console.log ("1");

funzione secondMessage ()
console.log ("2");

FirstMessage ();
SecondMessage ();

Produzione:

1
2

Come previsto, la funzione FirstMessage () viene eseguito prima e poi il funzione SecondMessage () è eseguito.

Esempio3

Supponiamo che il Metodo FirstMessage () comprende una richiesta API per recuperare i dati da un server. Dovremo aspettare la risposta/risposta del server, quindi utilizziamo il metodo integrato setTimeout ancora una volta.

Questa volta ritarderemo la richiesta di 3 secondi per vedere come possiamo richiedere una richiesta di recupero API.

funzione firstMessage ()
// funzione timeout per il ritardo della richiesta
setTimeout (function ()
console.log ("1");
, 3000);

funzione secondMessage ()
console.log ("2");

FirstMessage ();
SecondMessage ();

In questo codice, abbiamo appena spostato la console.log ("1"); dentro il funzione setTimeout ().

Ora che è davvero interessante è che quando esegui questo codice, vedrai che il 2 verrà mostrato per primo nella console:

Dopo 3 secondi il 1 verrà mostrato:

Come possiamo vedere, il Funzione FirstMessage () è stato chiamato prima e poi il funzione SecondMessage () è stato chiamato. Tuttavia, non possiamo vedere il risultato nella sequenza che abbiamo chiamato la nostra funzione.

Non è che JavaScript non abbia restituito il nostro codice in sequenza, è solo che JavaScript non ha aspettato il Funzione FirstMessage () Per eseguire completamente e iniziare a eseguire il funzione SecondMessage ().

Questo esempio è stato messo solo qui per mostrarti perché abbiamo bisogno di funzioni di callback. Funzioni di callback Facciamo in modo che un po 'di codice non eseguirà fino a quando il nostro codice richiesto non sia stato eseguito.

Tipi di funzione di callback

Ora che abbiamo visto quali sono i callback, come vengono utilizzati e perché sono importanti, diamo un'occhiata ai due tipi di funzioni di callback.

Funzione di callback sincrono

Le funzioni di richiamata sincrona vengono eseguite/eseguite contemporaneamente alla funzione di ordine superiore che utilizza la funzione di callback e sta principalmente bloccando; Completa la sua attività, quindi fornisce il controllo a un'altra funzione o linea di codice.

Questo è benefico come supponiamo che tu stia prendendo oggetti da un'API. Vuoi che la tua pagina carichi una volta che prendi alcuni dati da un'API. A meno che la risposta dall'API non sia recuperata, l'intero sito deve aspettare.

L'esempio 2 sopra indicato era funzioni sincrine in quanto eseguita riga per riga e una volta che la prima funzione è stata eseguita solo allora il controllo è stato dato alla seconda funzione i-e secondMessage () funzione.

Funzione di callback asincrona

Asincrono è completamente opposto al sincrono in quanto funziona parallelamente al chiamante della funzione e alla funzione di richiamata. Funzioni asincroni non bloccano mentre eseguono o eseguono più tardi della funzione di ordine superiore.

L'esempio 3 fornito sopra è stata una funzione di callback asincrona come abbiamo chiamato Funzione FirstMessage () Ma ha aspettato due secondi. In quei due secondi, ha restituito il controllo e il funzione SecondMessage () è stato eseguito. Una volta scaduti i tre secondi, il Funzione FirstMessage () ricominciato a ripetere.

Conclusione

UN funzione di callback è una funzione che viene fornita per la prima volta come argomento a qualche altra funzione e deve essere eseguita dopo le dichiarazioni scritte in quella definizione. Abbiamo imparato quali sono le funzioni di callback e come usarle in JavaScript, nonché perché le funzioni di callback sono importanti e quali sono i due tipi di funzioni di callback in questo post.