Utiliser setTimeout() dans jQuery

setTimeout() est une fonction intégrée à JavaScript, et non une méthode de jQuery. Vous pouvez l’appeler depuis du code jQuery pour mettre à jour un élément, lancer une animation ou programmer une autre action après un délai. Le rappel s’exécute une seule fois ; utilisez un intervalle si l’action doit se répéter.

Ce que fait setTimeout() avec jQuery

Le navigateur programme un rappel pour un prochain tour de sa boucle d’événements. jQuery ne fournit pas d’API de temporisation distincte : il propose des méthodes pratiques, comme .text() et .animate(), que le rappel peut appeler. Le délai demandé est un seuil minimal de programmation, et non la garantie que le rappel s’exécutera à un instant précis.

Syntaxe et arguments de setTimeout()

La forme de la fonction est setTimeout(callback, delay, ...args). callback est une fonction à appeler, delay est un nombre de millisecondes à attendre avant que son exécution puisse être programmée, et les arguments facultatifs sont transmis au rappel. Préférez un rappel sous forme de fonction à une chaîne de code : les chaînes sont plus difficiles à maintenir et peuvent poser des problèmes de sécurité.

Par exemple, cet exemple JavaScript autonome illustre le rappel et le délai. Il n’a pas été exécuté dans ce paquet ; aucun résultat observé n’est donc revendiqué. S’il est exécuté, il affiche dans la console le message «The callback ran», qui reste en anglais :

setTimeout(() => {
  console.log("The callback ran");
}, 1000);

Exécuter du code jQuery après un délai

Sur une page qui charge jQuery, appelez ses méthodes dans le rappel. Cet exemple de code source de page modifie le paragraphe une seule fois, après le clic sur le bouton et l’écoulement du délai. Il s’agit d’une illustration statique : elle dépend du DOM du navigateur et du script jQuery chargé depuis le réseau ; aucun résultat d’exécution n’est donc revendiqué. Les textes affichés par l’exemple, notamment ceux du paragraphe et du bouton, restent en anglais.

<p id="message">Waiting for an update.</p>
<button id="change">Change the message</button>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  $("#change").on("click", function () {
    setTimeout(function () {
      $("#message").text("The delayed update ran.");
    }, 1000);
  });
</script>

Le délai commence à chaque clic. Si l’utilisateur clique plusieurs fois, chaque clic programme son propre rappel ; conservez les identifiants des temporisateurs et annulez-les si seule la demande la plus récente doit être prise en compte.

Programmer des animations jQuery

Vous pouvez programmer des appels .animate() distincts pour qu’ils commencent à différents moments. Pour créer une séquence, tenez compte de la durée de chaque animation : un deuxième temporisateur réglé sur 2,000 millisecondes après le clic initial n’est pas automatiquement programmé à la fin de la première animation. Pour enchaîner plus clairement les actions, programmez la suivante depuis le rappel de fin de la première animation : $("#box").animate({ left: "+=100px" }, 1000, function () { $(this).animate({ top: "+=100px" }, 1000); });. Cet exemple suppose une page qui charge jQuery et contient un élément d’identifiant box dont la position CSS est non statique, par exemple position: relative. Définissez cette position avant l’animation : les deux propriétés, left et top, pourront ainsi déplacer cet élément. La première animation demande un déplacement d’une seconde ; la suivante commence lorsque le rappel de fin de la première s’exécute. Le chargement du navigateur et le rendu peuvent modifier le temps réel écoulé.

Annuler un temporisateur programmé

Enregistrez la valeur renvoyée par setTimeout() et transmettez cet identifiant à clearTimeout() avant l’exécution du rappel. Dans un gestionnaire de clic jQuery, déclarez let timer;, puis affectez timer = setTimeout(function () { $("#message").text("The delayed update ran."); }, 3000); au gestionnaire de #start et appelez clearTimeout(timer); dans celui de #cancel. Cette illustration syntaxique suppose la présence d’éléments d’identifiants start, cancel et message, ainsi que de jQuery. La chaîne affichée par l’exemple reste en anglais. clearTimeout() empêche l’exécution d’un rappel en attente ; il ne peut pas annuler un rappel qui a déjà commencé. Si chaque action de démarrage crée un nouveau temporisateur, décidez s’il faut d’abord annuler le précédent afin d’éviter l’accumulation de plusieurs mises à jour en attente.

Temporisation et identifiants des temporisateurs

Un délai de 0 programme tout de même le rappel de façon asynchrone ; il ne le fait pas s’exécuter dans la même séquence, avant l’instruction suivante. Si d’autres tâches sont en attente ou si la page est occupée, le navigateur peut exécuter le rappel après le délai demandé. Conservez l’identifiant renvoyé uniquement si vous devez annuler le rappel programmé, puis transmettez-le à clearTimeout() ; sa représentation n’est pas nécessaire ici.