Le coup de cœur de tous: le temps de la vidéo conceptuelle! Les rappels sont un concept important en JavaScript. Ce sont des fonctions qui sont appelées lorsqu'une action est terminée. Ensuite, donnez une structure et un timing à notre code.
Prenons par exemple l'animation que nous avons utilisée dans la dernière vidéo. Les animations prennent du temps à s'exécuter. Et si vous voulez que quelque chose d'autre se produise juste après la fin de cette animation? Devez-vous faire un setTimeoutpour la même durée que l'animation? Non. jQuery nous donne des fonctions de rappel utilisées uniquement dans ce but.
Il s'agit généralement d'un paramètre supplémentaire que nous transmettons à la méthode. Dans le cas de l'animation, on passe une fonction comme dernier paramètre. C'est la fonction de rappel, et sera appelée lorsque l'animation sera terminée.
$("#element").animate(( // stuff to animate ), function() ( // callback function ));Cela semble peut-être un peu génial, mais essentiellement, nous faisons juste:
.animate(a, b)Où aest un objet de propriétés et de valeurs, et best une fonction de rappel.
Mais nous savons d'après la dernière vidéo que l'animation peut également prendre un paramètre de minutage qui spécifie la durée d'une animation. Où cela va-t-il? C'est un paramètre facultatif, tout comme la fonction de rappel. Si nous voulions l'utiliser, nous le placerions juste au milieu, donc essentiellement:
.animate(propertiesObject, duration, callback);Et il existe également un autre paramètre facultatif, une chaîne que nous pouvons transmettre pour spécifier une valeur d'accélération.
.animate(propertiesObject, duration, easing, callback);jQuery se trouve être cool et intelligent sur ces paramètres optionnels. Si vous omettez les deux du milieu et passez simplement le rappel, il peut dire que ce que vous passez est une fonction, pas un nombre ou une chaîne, donc il sait que vous voulez dire une fonction de rappel. Vous n'avez pas à transmettre de fausses valeurs ou quoi que ce soit. C'est juste une bonne conception d'API!
Quand vous regardez la documentation jQuery, ils le montrent comme ceci:
.animate (propriétés (, durée) (, accélération) (, complète))
Puis juste après expliquez les types attendus.
Mais de toute façon, revenons aux rappels. Vous pouvez être assez imbriqué. Imaginez mettre une autre animation dans la fonction de rappel, et cette animation a son propre rappel. C'est parfaitement raisonnable, car vous voudrez peut-être faire une animation en plusieurs étapes. Vous avez juste besoin de rester organisé.
Voir le Pen 450c5810be27a9a8946cb8012cbd1213 par Chris Coyier (@chriscoyier) sur CodePen
Nous utilisons simplement l'animation comme exemple ici. Ajax est peut-être une utilisation encore plus courante des fonctions de rappel. Ajax est lorsque le navigateur appelle une autre ressource sans actualiser la page. Cela peut prendre un temps totalement inconnu. Cela dépend de la bande passante et de la latence, de la taille du fichier et des conditions d'erreur et de toutes sortes de choses. Vous ne pouvez probablement rien faire avec cette demande Ajax jusqu'à ce que vous obteniez quelque chose en retour ou plus d'informations. Les fonctions de rappel sont parfaites pour cela, et nous y reviendrons plus tard.