Comment définir un délai en javascript

Question

J'ai installé un élément de js dans mon site Web pour changer d'image, mais j'ai besoin d'un délai lorsque vous cliquez sur l'image une deuxième fois. Le délai doit être de 1000ms. Ainsi, vous cliquez sur l'img.jpg, puis l'img_onclick.jpg apparaît. Vous cliquez ensuite sur l'image img_onclick.jpg et il doit y avoir un délai de 1000 ms avant que l'image img.jpg ne s'affiche à nouveau.

Voici le code :

jQuery(document).ready(function($) {

    $(".toggle-container").hide();
    $(".trigger").toggle(function () {
        $(this).addClass("active");
        $(".trigger").find('img').prop('src', 'http://localhost:8888/images/img_onclick.jpg');
    }, function () {
        $(this).removeClass("active");
        $(".trigger").find('img').prop('src', 'http://localhost:8888/images/img.jpg');
    });
    $(".trigger").click(function () {
        $(this).next(".toggle-container").slideToggle();
    });
});

Answer 1

Pour les appels de synchronisation, vous pouvez utiliser la méthode ci-dessous :

function sleep(milliseconds) {
  var start = new Date().getTime();
  for (var i = 0; i < 1e7; i++) {
    if ((new Date().getTime() - start) > milliseconds){
      break;
    }
  }
}

Answer 2

Voici ce que je fais pour résoudre ce problème. Je suis d'accord pour dire que c'est à cause du problème de timing et qu'il fallait une pause pour exécuter le code.

var delayInMilliseconds = 1000; 
setTimeout(function() {
 //add your code here to execute
 }, delayInMilliseconds);

Ce nouveau code le mettra en pause pendant une seconde et pendant ce temps, il exécutera votre code.

Answer 3

Si vous avez besoin de vous rafraîchir, c'est une autre possibilité :

setTimeout(function () { 
    $("#jsSegurosProductos").jsGrid("refresh"); 
}, 1000);

Answer 4

Je vais donner mon avis car cela m'aide à comprendre ce que je fais.

Pour créer un diaporama à défilement automatique avec une attente de 3 secondes, j'ai procédé comme suit :

var isPlaying = true;

function autoPlay(playing){
   var delayTime = 3000;
   var timeIncrement = 3000;

   if(playing){
        for(var i=0; i<6; i++){//I have 6 images
            setTimeout(nextImage, delayTime);
            delayTime += timeIncrement;
        }
        isPlaying = false;

   }else{
       alert("auto play off");
   }
}

autoPlay(isPlaying);

Rappelez-vous que lorsque vous exécutez setTimeout() comme ceci, toutes les fonctions de temporisation seront exécutées comme si elles étaient exécutées en même temps, en supposant que dans setTimeout(nextImage, delayTime), le temps de temporisation est une valeur statique de 3000 millisecondes.

Ce que j'ai fait pour tenir compte de cela a été d'ajouter un supplément de 3000 milli/s après chaque incrémentation de la boucle for via delayTime += timeIncrement; .

Pour ceux qui s'y intéressent, voici à quoi ressemble mon nextImage() :

function nextImage(){
    if(currentImg === 1){//change to img 2
        for(var i=0; i<6; i++){
            images[i].style.zIndex = "0";
        }
        images[1].style.zIndex = "1";
        imgNumber.innerHTML = imageNumber_Text[1];
        imgDescription.innerHTML = imgDescText[1];

        currentImg = 2;
    }
    else if(currentImg === 2){//change to img 3
        for(var i=0; i<6; i++){
            images[i].style.zIndex = "0";
        }
        images[2].style.zIndex = "1";
        imgNumber.innerHTML = imageNumber_Text[2];
        imgDescription.innerHTML = imgDescText[2];

        currentImg = 3;
    }
    else if(currentImg === 3){//change to img 4
        for(var i=0; i<6; i++){
            images[i].style.zIndex = "0";
        }
        images[3].style.zIndex = "1";
        imgNumber.innerHTML = imageNumber_Text[3];
        imgDescription.innerHTML = imgDescText[3];

        currentImg = 4;
    }
    else if(currentImg === 4){//change to img 5
        for(var i=0; i<6; i++){
            images[i].style.zIndex = "0";
        }
        images[4].style.zIndex = "1";
        imgNumber.innerHTML = imageNumber_Text[4];
        imgDescription.innerHTML = imgDescText[4];

        currentImg = 5;
    }
    else if(currentImg === 5){//change to img 6
    for(var i=0; i<6; i++){
            images[i].style.zIndex = "0";
        }
        images[5].style.zIndex = "1";
        imgNumber.innerHTML = imageNumber_Text[5];
        imgDescription.innerHTML = imgDescText[5];

        currentImg = 6;
    }
    else if(currentImg === 6){//change to img 1
        for(var i=0; i<6; i++){
            images[i].style.zIndex = "0";
        }
        images[0].style.zIndex = "1";
        imgNumber.innerHTML = imageNumber_Text[0];
        imgDescription.innerHTML = imgDescText[0];

        currentImg = 1;
    }
}

Answer 5

Const delay = (delayInms) => new Promise(resolve => setTimeout(resolve, delayInms)) ; await delay(100)