JavaScript setTimeout, ordre des opérations, clearTimeout


Exemple

setTimeout

  • Exécute une fonction après avoir attendu un nombre spécifié de millisecondes.
  • utilisé pour retarder l'exécution d'une fonction.

Syntaxe: setTimeout(function, milliseconds) ou window.setTimeout(function, milliseconds)

Exemple: Cet exemple affiche "hello" sur la console après 1 seconde. Le deuxième paramètre est en millisecondes, donc 1000 = 1 sec, 250 = 0,25 sec, etc.

setTimeout(function() {
    console.log('hello');
}, 1000);

Problèmes avec setTimeout

si vous utilisez la méthode setTimeout dans une boucle for :

for (i = 0; i < 3; ++i) {
  setTimeout(function(){
    console.log(i);
  }, 500);
}

Cela affichera la valeur 3 three fois, ce qui n'est pas correct.

Solution de ce problème:

for (i = 0; i < 3; ++i) {
  setTimeout(function(j){
    console.log(i);
  }(i), 1000);
}

Il affichera la valeur 0 , 1 , 2 . Ici, nous passons le i dans la fonction en tant que paramètre ( j ).

Ordre des opérations

De plus, en raison du fait que Javascript est à thread unique et utilise une boucle d'événement globale, setTimeout peut être utilisé pour ajouter un élément à la fin de la file d'attente d'exécution en appelant setTimeout avec un délai nul. Par exemple:

setTimeout(function() {
    console.log('world');
}, 0);

console.log('hello');

Va effectivement sortir:

hello
world

De même, zéro milliseconde ici ne signifie pas que la fonction dans setTimeout s'exécutera immédiatement. Cela prendra un peu plus que cela en fonction des éléments à exécuter restant dans la file d'attente d'exécution. Celui-ci est juste poussé à la fin de la file d'attente.

Annulation d'un délai d'attente

clearTimeout (): arrête l'exécution de la fonction spécifiée dans setTimeout()

Syntaxe: clearTimeout (timeoutVariable) ou window.clearTimeout (timeoutVariable)

Exemple :

var timeout = setTimeout(function() {
    console.log('hello');
}, 1000);

clearTimeout(timeout); // The timeout will no longer be executed