Comment définir le délai en javascript

J'ai un morceau de js sur mon site Web pour changer d'image, mais j'ai besoin d'un délai lorsque vous cliquez une deuxième fois sur l'image. Le délai doit être de 1000 ms. Donc, vous cliqueriez sur le img.jpg puis le img_onclick.jpg apparaîtrait. Vous cliqueriez alors sur l'image img_onclick.jpg, il devrait alors y avoir un délai de 1000 ms avant que le img.jpg ne soit à nouveau affiché.

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();
    });
});

Utilisez setTimeout():

var delayInMilliseconds = 1000; //1 second

setTimeout(function() {
  //your code to be executed after 1 second
}, delayInMilliseconds);

Si vous voulez le faire sans setTimeout: Référez-vous à cette question .

setTimeout(function(){


}, 500); 

Placez votre code à l'intérieur du { }

500 = 0,5 seconde

2200 = 2,2 secondes

etc.

Solution ES-6

Voici un exemple de code qui utilise aync / await pour avoir un délai réel.

Il y a beaucoup de contraintes et cela peut ne pas être utile, mais il suffit de poster ici pour le plaisir.

    async function delay(delayInms) {
      return new Promise(resolve  => {
        setTimeout(() => {
          resolve(2);
        }, delayInms);
      });
    }
    async function sample() {
      console.log('a');
      console.log('waiting...')
      let delayres = await delay(3000);
      console.log('b');
    }
    sample();

Il existe deux types (principalement utilisés) de fonction de minuterie en javascript setTimeoutet setInterval( autre )

Ces deux méthodes ont la même signature. Ils prennent une fonction de rappel et un temps de retard comme paramètre.

setTimeouts'exécute une seule fois après le délai alors que setIntervalcontinue d'appeler la fonction de rappel après chaque délai millisecs.

ces deux méthodes retournent un identificateur entier qui peut être utilisé pour les effacer avant l'expiration du minuteur.

clearTimeoutet clearIntervalces deux méthodes prennent un identifiant entier renvoyé par les fonctions ci-dessus setTimeoutetsetInterval

Exemple:

setTimeout

alert("before setTimeout");

setTimeout(function(){
        alert("I am setTimeout");
   },1000); //delay is in milliseconds 

  alert("after setTimeout");

Si vous exécutez le code ci-dessus, vous verrez qu'il alerte before setTimeoutet after setTimeoutenfin il alerte I am setTimeoutaprès 1sec (1000ms)

Ce que vous pouvez remarquer à partir de l'exemple est que le setTimeout(...)est asynchrone, ce qui signifie qu'il n'attend pas que le minuteur se soit écoulé avant de passer à l'instruction suivante, c'est-à-direalert("after setTimeout");

Exemple:

setInterval

alert("before setInterval"); //called first

 var tid = setInterval(function(){
        //called 5 times each time after one second  
      //before getting cleared by below timeout. 
        alert("I am setInterval");
   },1000); //delay is in milliseconds 

  alert("after setInterval"); //called second

setTimeout(function(){
     clearInterval(tid); //clear above interval after 5 seconds
},5000);

Si vous exécutez le code ci-dessus, vous verrez qu'il alerte before setIntervalet after setIntervalenfin il alerte I am setInterval 5 fois après 1sec (1000ms) car le setTimeout efface la minuterie après 5 secondes ou toutes les 1 seconde, vous recevrez une alerte à l' I am setIntervalinfini.

Comment le navigateur fait-il cela en interne?

Je vais vous expliquer brièvement.

Pour comprendre que vous devez connaître la file d'attente d'événements en javascript. Une file d'attente d'événements est implémentée dans le navigateur. A chaque fois qu'un événement est déclenché dans js, tous ces événements (comme le clic, etc.) sont ajoutés à cette file d'attente. Lorsque votre navigateur n'a rien à exécuter, il prend un événement de la file d'attente et les exécute un par un.

Désormais, lorsque vous appelez setTimeoutou que setIntervalvotre rappel est enregistré dans un minuteur dans le navigateur et qu'il est ajouté à la file d'attente d'événements après l'expiration du délai imparti, javascript prend l'événement de la file d'attente et l'exécute.

Cela arrive, car les moteurs javascript sont à thread unique et ne peuvent exécuter qu'une seule chose à la fois. Ainsi, ils ne peuvent pas exécuter d'autres javascript et garder une trace de votre minuterie. C'est pourquoi ces minuteries sont enregistrées avec le navigateur (le navigateur n'est pas à thread unique) et il peut garder une trace du minuteur et ajouter un événement dans la file d'attente après l'expiration du minuteur.

la même chose se produit setIntervaluniquement dans ce cas, l'événement est ajouté à la file d'attente encore et encore après l'intervalle spécifié jusqu'à ce qu'il soit effacé ou que la page du navigateur soit actualisée.

Remarque

Le paramètre de retard que vous passez à ces fonctions est le temps de retard minimum pour exécuter le rappel. En effet, après l'expiration du minuteur, le navigateur ajoute l'événement à la file d'attente à exécuter par le moteur javascript, mais l'exécution du rappel dépend de la position de vos événements dans la file d'attente et comme le moteur est à thread unique, il exécutera tous les événements dans la file d'attente une par une.

Par conséquent, votre rappel peut parfois prendre plus que le délai spécifié pour être appelé, spécialement lorsque votre autre code bloque le thread et ne lui laisse pas le temps de traiter ce qui se trouve dans la file d'attente.

Et comme je l'ai mentionné, javascript est un fil unique. Donc, si vous bloquez le fil pendant longtemps.

Comme ce code

while(true) { //infinite loop 
}

Votre utilisateur peut recevoir un message indiquant que la page ne répond pas .

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;
    }
  }
}

Si vous avez besoin de rafraîchissement, voici une autre possibilité:

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

Voici ce que je fais pour résoudre ce problème. Je conviens que cela est dû au problème de synchronisation 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 1 seconde et exécutera pendant ce temps votre code.

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 effectué les opérations suivantes:

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);

Souvenez-vous que lors de l'exécution de setTimeout () comme ceci; il exécutera toutes les fonctions de temporisation comme si elles étaient exécutées en même temps en supposant que dans setTimeout (nextImage, delayTime); le temps de retard est un 3000 millisecondes statique.

Ce que j'ai fait pour tenir compte de cela, c'est d'ajouter 3000 milli / s supplémentaires après chaque incrémentation de boucle pour via delayTime += timeIncrement;.

Pour ceux qui se soucient, voici à quoi ressemble ma 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;
    }
}