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

Utilice setTimeout() :

var delayInMilliseconds = 1000; //1 second

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

Si vous voulez le faire sans setTimeout : Se référer à cette question .

Answer 2

setTimeout(function(){

}, 500); 

Placez votre code à l'intérieur de l'élément { }

500 = 0,5 seconde

2200 = 2,2 secondes

etc.

Answer 3

ES-6 Solution

Vous trouverez ci-dessous un exemple de code qui utilise aync/await pour avoir un retard réel.

Il y a beaucoup de contraintes et cela peut ne pas être utile, mais je poste ici pour le plaisir

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

Answer 4

Vous pouvez utiliser la promesse

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

utilisez alors cette méthode

console.log("Hello");
sleep(2000).then(() => { console.log("World!"); });

ou

console.log("Hello");
await sleep(2000);
console.log("World!");

Answer 5

Il y a deux types (les plus utilisés) de fonction timer en javascript setTimeout y setInterval ( autre )

Ces deux méthodes ont la même signature. Elles prennent une fonction de rappel et un délai comme paramètre.

setTimeout ne s'exécute qu'une seule fois après le délai alors que setInterval continue à appeler la fonction de rappel après chaque milisec de délai.

Ces deux méthodes renvoient un identifiant entier qui peut être utilisé pour les effacer avant l'expiration de la minuterie.

clearTimeout y clearInterval Ces deux méthodes prennent un identifiant entier retourné par les fonctions ci-dessus. setTimeout y setInterval

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 setTimeout et ensuite after setTimeout enfin il alerte I am setTimeout après 1sec (1000ms)

Ce que l'on peut remarquer dans l'exemple, c'est que l'option setTimeout(...) est asynchrone, ce qui signifie qu'elle n'attend pas que le délai soit écoulé pour passer à l'instruction suivante, c'est à dire alert("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 setInterval et ensuite after setInterval enfin il alerte I am setInterval 5 fois après 1sec (1000ms) parce que le setTimeout efface la minuterie après 5 secondes, sinon vous recevrez une alerte toutes les 1 seconde. I am setInterval Infiniment.

Comment le navigateur fait-il cela en interne ?

Je vais vous expliquer en quelques mots.

Pour comprendre cela, vous devez connaître la file d'attente des événements en javascript. Il existe une file d'attente d'événements implémentée dans le navigateur. Chaque fois qu'un événement est déclenché en javascript, tous ces événements (comme un clic, etc.) sont ajoutés à cette file. 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.

Maintenant, quand vous appelez setTimeout o setInterval votre callback est enregistré dans un timer dans le navigateur et il est ajouté à la file d'attente des événements après l'expiration du temps donné et finalement javascript prend l'événement de la file d'attente et l'exécute.

Il en est ainsi parce que les moteurs javascript sont monofilaires et ne peuvent exécuter qu'une seule chose à la fois. Donc, ils ne peuvent pas exécuter d'autres javascript et garder la trace de votre timer. C'est pourquoi ces timers sont enregistrés avec le navigateur (le navigateur n'est pas un thread unique) et il peut garder la trace du timer et ajouter un événement dans la file d'attente après l'expiration du timer.

Il en va de même pour setInterval seulement 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 rafraîchie.

Note

Le paramètre de délai que vous passez à ces fonctions est le délai minimum. minimum pour exécuter le callback. En effet, après l'expiration du délai le navigateur ajoute l'événement à la file d'attente pour être exécuté par le moteur moteur javascript mais l'exécution de la callback dépend de la position de l'événement dans la file d'attente. position de l'événement dans la file d'attente et comme le moteur est mono-threadé, il exécutera tous les événements dans la file d'attente un par un.

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

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

Comme ce code

while(true) { //infinite loop 
}

Votre utilisateur peut recevoir un message disant La page ne répond pas .