Comment créer des délais en JavaScript pour le cyclisme d'images : un exemple pratique

Comment implémenter des délais en JavaScript

En tant que développeur Web, il est souvent nécessaire d'incorporer des délais dans votre code à diverses fins. L'un de ces scénarios consiste à basculer entre les images de votre site Web, où vous souhaitez un délai entre les clics pour éviter un cycle rapide des images.

Dans ce cas spécifique, vous souhaitez implémenter un délai de 1 000 ms (1 seconde) après avoir cliqué sur une image. image pour présenter img_onclick.jpg, suivi d'un délai avant de revenir à img.jpg lors d'un deuxième clic. Pour y parvenir, pensez à utiliser la fonction setTimeout() de JavaScript.

Solution utilisant setTimeout()

<code class="javascript">var delayInMilliseconds = 1000; //1 second

$(".trigger").click(function () {
    $(this).next(".toggle-container").slideToggle();
    
    // Schedule a callback to switch back to img.jpg after 1 second
    setTimeout(function() {
        $(".trigger").find('img').prop('src', 'http://localhost:8888/images/img.jpg');
    }, delayInMilliseconds);
});</code>

Dans cette solution, nous utilisons setTimeout() pour planifier une fonction de rappel qui revient à img.jpg après un délai de 1000 ms.

Solution alternative sans setTimeout()

Bien que setTimeout() soit une approche courante, il convient de mentionner qu'il existe une autre solution qui implique l'utilisation de la boucle d'événements JavaScript et d'une construction async/await. Cependant, cette approche est plus complexe et sort du cadre de cette discussion. Pour référence, vous pouvez trouver plus d'informations sur cette alternative dans la question fournie dans la section "Si vous souhaitez le faire sans setTimeout".

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!