Comment implémenter un délai spécifié en JavaScript pour un cas d'utilisation spécifique ?

Implémentation du délai d'exécution en JavaScript

Dans certains scénarios, il devient nécessaire d'ajouter un délai dans l'exécution d'un script pour des améliorations de l'interface utilisateur ou optimisation des performances. Dans ce contexte, nous explorerons comment introduire un délai dans JavaScript pour répondre à un cas d'utilisation spécifique.

Cas d'utilisation :

Supposons que vous disposiez d'une fonctionnalité de basculement d'image où cliquer sur une image la fait passer à une image différente, et lorsque vous cliquez à nouveau, elle revient à l'image d'origine. Pour améliorer l'expérience utilisateur, vous souhaitez intégrer un délai de 1 seconde avant que l'image initiale (img.jpg) ne réapparaisse après avoir cliqué sur la deuxième image (img_onclick.jpg).

Solution :

La fonction setTimeout() fournit une approche polyvalente pour introduire un délai dans JavaScript. Sa syntaxe est la suivante :

setTimeout(function, milliseconds)

Dans cette solution, nous utiliserons setTimeout() pour créer un délai de 1000 millisecondes (1 seconde) avant de revenir à l'image originale img.jpg. Voici le code modifié :

<code class="javascript">$(".trigger").toggle(function () {
    $(this).addClass("active");
    $(".trigger").find('img').prop('src', 'http://localhost:8888/images/img_onclick.jpg');
}, function () {
    $(this).removeClass("active");
    // Added setTimeout to introduce a delay
    setTimeout(function() {
      $(".trigger").find('img').prop('src', 'http://localhost:8888/images/img.jpg');
    }, 1000); // 1000 milliseconds delay
});</code>

En incorporant ce changement, lorsque l'on clique sur la deuxième image (img_onclick.jpg), le script attendra 1 seconde avant d'afficher l'image originale (img.jpg), effectivement en ajoutant un délai si vous le souhaitez.

Notez qu'il existe des méthodes alternatives pour obtenir des résultats similaires, mais pour ce cas d'utilisation particulier, setTimeout() fournit une solution simple et efficace.

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!