Comment implémenter un délai en JavaScript pour le comportement de basculement d'image ?

Implémentation du délai en JavaScript

Dans le domaine du développement Web, contrôler le timing de divers événements est crucial pour créer des applications conviviales et expériences interactives. Une exigence courante consiste à introduire un délai pour empêcher les actions rapides ou répétitives déclenchées par les entrées de l'utilisateur.

Plus précisément, JavaScript fournit une méthode polyvalente pour obtenir des délais. Lorsque vous travaillez avec des images, comme c'est le cas dans le code fourni, vous pouvez utiliser la fonction setTimeout() pour suspendre l'exécution du code JavaScript pendant une durée spécifiée.

Dans votre code, votre objectif est de créer un comportement de bascule dans lequel cliquer sur une image change sa source en "img_onclick.jpg" et déclenche un délai de 1 000 millisecondes (1 seconde) avant de revenir à "img.jpg". Pour y parvenir, nous introduisons la fonction setTimeout() comme suit :

<code class="javascript">var delayInMilliseconds = 1000; // Set the desired delay

$(".trigger").click(function() {
  // Code to handle image toggle
  $(this).next(".toggle-container").slideToggle();
  setTimeout(function() {
    $(this).find('img').prop('src', 'http://localhost:8888/images/img.jpg');
  }, delayInMilliseconds);
});</code>

En encapsulant le code qui rétablit la source de l'image dans la fonction setTimeout() , nous créons un délai après l'exécution de l'opération de bascule. Cela garantit que l'image "img.jpg" ne s'affiche pas immédiatement lorsque vous cliquez sur l'image "img_onclick.jpg".

Pour une approche alternative sans utiliser setTimeout(), reportez-vous à cette question .

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!