Come sviluppatore JavaScript, puoi dedicare la maggior parte del tuo tempo a sviluppare applicazioni e programmi sincroni. Alcune operazioni specifiche possono iniziare solo quando le precedenti sono finite in questo tipo di applicazioni. Tuttavia, quando i dati sono richiesti da una fonte esterna come un'API esterna, spesso non abbiamo idea quando verranno restituiti i dati richiesti.

In tali casi, devi aspettare la risposta, ma allo stesso tempo non si desidera che la tua applicazione sia in uno stato di arresto mentre i dati sono recuperati. Aggiunta Funzioni di callback sono utili in questa situazione.

Questo articolo spiegherà le funzioni di callback in jQuery con l'aiuto di esempi appropriati. Quindi iniziamo!

Funzioni di callback in jQuery

Le dichiarazioni aggiunte in un programma JavaScript sono eseguite in sequenza. Ma quando si utilizza un effetto in jQuery, ci vuole tempo per eseguire la sua funzionalità; Nel frattempo, il codice aggiunto nella riga successiva verrà eseguito. Per evitare questa situazione, JQuery offre una funzione di callback per ogni metodo di effetto jQuery.

Una funzione di callback è un tipo di funzione jQuery che viene eseguita quando il metodo degli effetti aggiunti termina il loro funzionamento. Questa funzione viene passata come ultimo argomento nel metodo specifico dell'effetto jQuery.

Ora, guarda la sintassi della funzione di callback in jQuery.

Sintassi delle funzioni di callback jQuery

$ (selettore).Effect_Function (velocità, callback);

In "selettore“, È possibile aggiungere un selettore jQuery per selezionare gli elementi HTML richiesti e“Effect_Function ()"È un metodo dell'effetto jQuery in cui devi passare un argomento per"velocità" E "richiamare" funzione.

Esempio 1: Utilizzo di funzioni di callback in jQuery

Prima di tutto, aggiungeremo un "Nascondere il paragrafo"Pulsante e un paragrafo nel nostro"indice.html" file:

Nascondere il paragrafo

Questo è un paragrafo con il testo di esempio.

Nel prossimo passaggio, ci sposteremo verso il nostro file JavaScript "il mio progetto.js"E scrivi il seguente codice in esso:

$ (documento).ready (function ()
$ ("pulsante").Click (function ()
$ ("p").Hide ("slow", function ()
Avviso ("Il paragrafo è ora nascosto");
);
);
);

Ora, quando l'utente fa clic su "Nascondere il paragrafo"Pulsante, il selettore dei nomi dell'elemento jQuery"$ ("P")"Troverà e otterrà il"P"O elemento di paragrafo e poi nasconderlo lentamente dalla pagina web. Dopo averlo fatto, il callback "funzione()"Verrà eseguito e visualizza una casella di avviso nel browser:

Ecco una GIF che dimostra l'output del nostro programma JavaScript:

Nel caso in cui si desideri verificare come funzionerà lo stesso programma senza una funzione di callback jQuery, quindi aggiungi il codice di seguito donati nel tuo file JavaScript:

$ (documento).ready (function ()
$ ("pulsante").Click (function ()
$ ("p").nascondersi (1000);
Avviso ("Il paragrafo è ora nascosto");
);
);

Senza aggiungere una funzione di callback, l'interprete JavaScript opererà come segue:

Esempio 2: Utilizzo di funzioni di callback in jQuery

In questo esempio, aggiungeremo una funzione di callback per "slidetoggle"Effetto jQuery. Prima di allora, aggiungeremo un paragrafo e un "Cliccami"Pulsante:

questo è un paragrafo d'esempio.

Cliccami

Dopodiché, scriveremo il seguente codice nel nostro "il mio progetto.js" file:

$ (documento).ready (function ()
$ ("pulsante").Click (function ()
$ ("p").slidetoggle ("slow", function ()
Avviso ("L'effetto di disattivazione di diapositiva è ora completato.");
);
);
);

Il codice sopra dato specifica che il clic del pulsante scivola lentamente verso il basso "P"Elemento. Quando questo "slidetoggle ()"Effetto termina, la funzione di callback verrà eseguita e una casella di avviso apparirà sulla pagina Web affermando che"L'effetto di disattivazione della diapositiva è ora completato":

Dai un'occhiata all'output del programma fornito:

Ora, nello stesso "indice.html"File, aggiungeremo un'intestazione con il"

"Tag:

Questa è la testa

Successivamente, il selettore dei nomi dell'elemento $ ("H1, P") Nel file JavaScript troverà e otterrà il H1 E P elementi. Quindi, il paragrafo verrà scivolato verso il basso con "lento"La velocità e l'intestazione saranno mostrate nella sua posizione. Infine, la funzione di callback visualizzerà la casella di avviso sul browser:

$ (documento).ready (function ()
$ ("pulsante").Click (function ()
$ ("H1, P").slidetoggle ("slow", function ()
Avviso ("L'effetto a disattivazione delle diapositive è completato.");
);
);
);

Ora, la casella di avviso apparirà due volte sulla pagina web, una per "H1”Heading e l'altro per il"P"Elemento di paragrafo:

Come puoi vedere dall'output sopra offerto abbiamo implementato correttamente la funzione di callback in jQuery.

Conclusione

La funzione di callback in jQuery è una funzione che viene eseguita quando il metodo dell'effetto aggiunto ha terminato la sua esecuzione. In un metodo dell'effetto jQuery, la funzione di callback viene passata per essere richiamata in seguito e di solito viene specificata come ultimo argomento. Questo articolo ha spiegato le funzioni di callback in jQuery e abbiamo anche fornito esempi appropriati relativi all'utilizzo delle funzioni di callback.