Comment définir un délai en javascript

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 : Reportez-vous à [cette question][1].

[1] : https://stackoverflow.com/questions/1183872/

setTimeout(function(){

}, 500); 

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

500 = 0.5 secondes

2200 = 2,2 secondes

etc.

Il y a deux types (les plus utilisés) de fonction timer en javascript : setTimeout et setInterval ([other][1])

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 fois après le délai alors que setInterval continue d'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 du délai.

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

Exemple:

[setTimeout][2].

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 avant setTimeout puis après setTimeout et enfin il alerte Je suis setTimeout après 1sec (1000ms).

Ce que vous pouvez remarquer dans cet exemple, c'est que la fonction setTimeout(...) est asynchrone, ce qui signifie qu'elle n'attend pas que le délai soit écoulé avant de passer à l'instruction suivante, c'est-à-dire alert("after setTimeout&quot ;);.

Exemple:

[setInterval][3]

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 avant setInterval puis après setInterval ; enfin, il alerte je suis setInterval 5 fois après 1sec (1000ms) parce que le setTimeout efface le timer après 5 secondes ; sinon, toutes les 1sec, vous obtiendrez une alerte je suis setInterval infinie.

Comment le navigateur fait-il cela en interne?

Je vais vous l'expliquer en quelques mots.

Pour comprendre cela, vous devez connaître la file d'attente des événements en javascript. Il y a 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, lorsque vous appelez setTimeout ou setInterval votre callback est enregistré dans un timer dans le navigateur et il est ajouté à la file d'attente des événements après que le temps donné expire et finalement javascript prend l'événement de la file d'attente et l'exécute.

Cela se passe ainsi, parce que le moteur javascript est un thread unique et qu'il ne peut 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, mais 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 minimal 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 qu'il soit exécuté par le moteur javascript. moteur javascript mais l'exécution du callback dépend de la position de l'événement dans la file d'attente. de la position de l'événement dans la file d'attente et comme le moteur est mono-threadé, il exécutera tous les événements. exécutera tous les événements de 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 se trouve dans la file d'attente.

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

Comme ce code

while(true) { //infinite loop 
}

Votre utilisateur peut recevoir un message disant page not responding.

[1] : https://developer.mozilla.org/en-US/Add-ons/Code_snippets/Timers [2] : https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout [3] : https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval