En tant que développeur JavaScript, vous pouvez passer la majorité de votre temps à développer des applications et des programmes synchrones. Certaines opérations spécifiques ne peuvent démarrer que lorsque les précédentes sont terminées dans ce type d'applications. Cependant, lorsque des données sont demandées à une source extérieure telle qu'une API externe, nous n'avons souvent aucune idée du moment où les données requises seront renvoyées.

Dans de tels cas, vous devez attendre la réponse, mais en même temps, vous ne voulez pas que votre application soit à l'état pendant que les données sont récupérées. Ajouter Fonctions de rappel sont utiles dans cette situation.

Cet article expliquera les fonctions de rappel dans jquery avec l'aide d'exemples appropriés. Alors, commençons!

Fonctions de rappel dans jQuery

Les instructions ajoutées dans un programme JavaScript sont exécutées séquentiellement. Mais, lorsque vous utilisez un effet dans jQuery, il faut du temps pour effectuer sa fonctionnalité; En attendant, le code ajouté dans les lignes suivantes fonctionnera. Pour éviter cette situation, jQuery propose une fonction de rappel pour chaque méthode d'effet jQuery.

Une fonction de rappel est un type de fonction jQuery qui est exécuté lorsque la méthode d'effets ajoutées termine leur opération. Cette fonction est adoptée comme dernier argument dans la méthode d'effet jQuery spécifique.

Maintenant, regardez la syntaxe de la fonction de rappel dans jQuery.

Syntaxe des fonctions de rappel jQuery

$ (sélecteur).Effect_Function (vitesse, rappel);

Dans "sélecteur«, Vous pouvez ajouter un sélecteur jQuery pour sélectionner les éléments HTML requis, et le« «Effect_Function ()"Est une méthode d'effet jQuery dans laquelle vous devez passer un argument pour"vitesse" et "rappeler" fonction.

Exemple 1: Utilisation des fonctions de rappel dans jQuery

Tout d'abord, nous ajouterons un «Paragraphe"Bouton et un paragraphe dans notre"indice.html" déposer:

Paragraphe

Ceci est un paragraphe avec un exemple de texte.

Dans la prochaine étape, nous nous dirigerons vers notre fichier JavaScript "mon projet.js»Et écrivez le code suivant dedans:

$ (document).ready (function ()
$ ("bouton").cliquez sur (fonction ()
$ ("p").hide ("Slow", function ()
alert ("le paragraphe est maintenant caché");
);
);
);

Maintenant, lorsque l'utilisateur clique sur le "Paragraphe"Bouton, le sélecteur de nom de l'élément jQuery"$ («P»)"Je trouvera et obtiendra le"p”Ou élément de paragraphe, puis le cachez-le lentement à la page Web. Après cela, le rappel "fonction()»Sera exécuté et il affiche une boîte d'alerte dans le navigateur:

Voici un GIF qui démontre la sortie de notre programme JavaScript:

Dans le cas, vous souhaitez vérifier comment le même programme fonctionnera sans une fonction de rappel jQuery, puis ajoutez le code donné dans votre fichier javascript:

$ (document).ready (function ()
$ ("bouton").cliquez sur (fonction ()
$ ("p").masquer (1000);
alert ("le paragraphe est maintenant caché");
);
);

Sans ajouter de fonction de rappel, l'interprète JavaScript fonctionnera comme suit:

Exemple 2: Utilisation des fonctions de rappel dans jQuery

Dans cet exemple, nous ajouterons une fonction de rappel pour «glissade”Effet jQuery. Avant cela, nous ajouterons un paragraphe et un ««Cliquez sur moi" bouton:

Ceci est un exemple de paragraphe.

Cliquez sur moi

Après cela, nous rédigerons le code suivant dans notre «mon projet.js" déposer:

$ (document).ready (function ()
$ ("bouton").cliquez sur (fonction ()
$ ("p").Slidetoggle ("Slow", fonction ()
alerte ("L'effet de bascule de diapositive est maintenant terminé.");
);
);
);

Le code donné ci-dessus spécifie que le clic sur le bouton glissera lentement le «p" élément. Quand ça «slidetoggle ()«Effet se termine, la fonction de rappel sera exécutée et une boîte d'alerte apparaîtra sur la page Web indiquant que«L'effet de bascule de diapositive est maintenant terminé»:

Découvrez la sortie du programme fourni:

Maintenant, dans le même "indice.html«Fichier, nous allons ajouter une rubrique avec le«

" étiqueter:

C'est une tête

Ensuite, le sélecteur de nom d'élément $ ("H1, P") dans le fichier javascript trouvera et obtiendra le H1 et p éléments. Ensuite, le paragraphe sera glissé avec «lent«La vitesse et le cap seront affichés dans sa position. Enfin, la fonction de rappel affichera la boîte d'alerte du navigateur:

$ (document).ready (function ()
$ ("bouton").cliquez sur (fonction ()
$ ("H1, P").Slidetoggle ("Slow", fonction ()
alerte ("L'effet de bascule de diapositive est terminé.");
);
);
);

Maintenant, le boîtier d'alerte apparaîtra deux fois sur la page Web, un pour le «H1«Heure et l'autre pour le«p»Élément de paragraphe:

Comme vous pouvez le voir à partir de la sortie ci-dessus, nous avons réussi à implémenter la fonction de rappel dans jQuery.

Conclusion

La fonction de rappel dans jQuery est une fonction qui est exécutée lorsque la méthode d'effet ajouté a terminé son exécution. Dans une méthode d'effet jQuery, la fonction de rappel est transmise pour être rappelée plus tard et est généralement spécifiée comme dernier argument. Cet article a expliqué les fonctions de rappel dans jQuery et nous avons également fourni des exemples appropriés liés à l'utilisation des fonctions de rappel.