JavaScript
Intervalles et délais

Syntaxe

• timeoutID = setTimeout (function () {}, millisecondes)
• intervalID = setInterval (function () {}, millisecondes)
• timeoutID = setTimeout (function () {}, millisecondes, paramètre, paramètre, ...)
• intervalID = setInterval (function () {}, millisecondes, paramètre, paramètre, ...)
• clearTimeout (timeoutID)
• clearInterval (intervalID)

Remarques

Les intervalles

function waitFunc(){
    console.log("This will be logged every 5 seconds");
}

window.setInterval(waitFunc,5000);

Supprimer les intervalles

window.setInterval() renvoie un IntervalID , qui peut être utilisé pour empêcher l'exécution de cet intervalle. Pour ce faire, stockez la valeur de retour de window.setInterval() dans une variable et appelez clearInterval() avec cette variable comme seul argument:

function waitFunc(){
    console.log("This will be logged every 5 seconds");
}    

var interval = window.setInterval(waitFunc,5000);

window.setTimeout(function(){
    clearInterval(interval);
},32000);

Cela se connectera. This will be logged every 5 seconds toutes les 5 secondes, mais l’arrêtera après 32 secondes. Donc, il va enregistrer le message 6 fois.

Supprimer les délais d'attente

window.setTimout() renvoie un TimeoutID , qui peut être utilisé pour empêcher l'exécution de ce délai. Pour ce faire, stockez la valeur de retour de window.setTimeout() dans une variable et appelez clearTimeout() avec cette variable comme seul argument:

function waitFunc(){
    console.log("This will not be logged after 5 seconds");
}
function stopFunc(){
    clearTimeout(timeout);
}

var timeout = window.setTimeout(waitFunc,5000);
window.setTimeout(stopFunc,3000);

Cela ne enregistrera pas le message car le temporisateur est arrêté après 3 secondes.

Set récursifTimeout

Pour répéter une fonction indéfiniment, setTimeout peut être appelé récursivement:

function repeatingFunc() {
    console.log("It's been 5 seconds. Execute the function again.");
    setTimeout(repeatingFunc, 5000);
}

setTimeout(repeatingFunc, 5000);

Contrairement à setInterval , cela garantit que la fonction s'exécutera même si le temps d'exécution de la fonction est plus long que le délai spécifié. Cependant, il ne garantit pas un intervalle régulier entre les exécutions de fonctions. Ce comportement varie également car une exception avant l'appel récursif à setTimeout l'empêche de se répéter, alors que setInterval se répète indéfiniment, quelles que soient les exceptions.

setTimeout, ordre des opérations, clearTimeout

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

Les intervalles

la norme

Vous n'avez pas besoin de créer la variable, mais c'est une bonne pratique car vous pouvez utiliser cette variable avec clearInterval pour arrêter l'intervalle en cours d'exécution.

var int = setInterval("doSomething()", 5000 ); /* 5 seconds */
var int = setInterval(doSomething, 5000 ); /* same thing, no quotes, no parens */

Si vous devez transmettre des paramètres à la fonction doSomething, vous pouvez les transmettre en tant que paramètres supplémentaires au-delà des deux premiers pour définirInterval.

Sans chevauchement

setInterval, comme ci-dessus, fonctionnera toutes les 5 secondes (ou ce que vous avez défini), peu importe quoi. Même si la fonction do do Something prend plus de 5 secondes pour fonctionner. Cela peut créer des problèmes. Si vous voulez simplement vous assurer qu'il y a une pause entre les exécutions de doSomething, vous pouvez le faire:

(function(){

   doSomething();

   setTimeout(arguments.callee, 5000);

})()