javascript setTimeout
JavaScript

Javascript setTimeout et setInterval : comment gérer le délai ?

Nous allons voir dans cet article comment gérer le délai en javascript avec setTimeout et setInterval. A noter qu’en javascript, vous avez plusieurs options pour la gestion du délais (promises, observable) dont nous parlerons ultérieurement, notamment dans des frameworks comme ReactJs ou Angular.

Javascript setTimeout

Vous voulez faire une action mais après un certain délai? Il vous faut dans ce cas là utiliser la méthode setTimeout.

setTimeout

setTimeout provient de l’objet window qui représente votre fenêtre du navigateur. Vous pouvez ainsi appeler setTimeout sous cette forme : window.setTimeout. Nous préférons utiliser directement :

function helloWorld(){
    console.log("Salut, je m'affiche chaque seconde");
}
setTimeout(helloWorld,1000); //Affiche "Salut je m'affiche chaque seconde" toutes les secondes

A noter que setTimeout va prendre en premier argument une fonction et en deuxième argument le délai (en millisecondes). Ici j’ai appelé la fonction helloWorld et toutes les 1000 ms (soit toutes les secondes)

clearTimeout

Il arrive que l’on veuille arrêter l’execution en cours d’un setTimeout avant qu’il s’execute. Il est tout à fait possible de le faire avec la fonction clearTimeout qui provient aussi de l’objet window en javascript.

Nous allons voir deux exemples tout de suite :

const t;
function helloWorld(){
    console.log("Salut, je m'affiche au bout d'une seconde");
}
t = setTimeout(helloWorld,1000); //Affiche "Salut, je m'affiche au bout d'une seconde" au bout d'une seconde
clearTimeout(t); // va empecher l'execution du setTimeout

Un deuxième exemple (beaucoup) plus complexe, si vous êtes bloqués dans une fonction recursive et que vous souhaitez l’arrêter. Si vous ne comprenez pas cet exemple, pas de panique, ce n’est pas très grave.

let t;
function helloWorld(){
    console.log("Salut, je m'affiche chaque seconde");
    t = setTimeout(helloWorld,1000); 
}
t = setTimeout(helloWorld,1000); //Affiche "Salut je m'affiche chaque 
seconde" toutes les secondes
clearTimeout(t); // va empêcher l'execution du setTimeout et la boucle infinie de la fonction recursive

Javascript setInterval

Si vous avez compris setTimeout, vous allez forcement comprendre setInterval. Tout comme setTimeout, setInterval est une méthode de l’objet window. vous pouvez donc l’appeler comme suit : wndow.setTimeinterval.

setInterval va appeler votre fonction tous les x secondes. C’est un setTimeout mais sous forme de boucle.

setInterval

Nous allons voir un exemple de setInterval directement :

let t;
function helloWorld(){
    console.log("Salut, je m'affiche chaque seconde");
}
t = setInterval(helloWorld,1000); //Affiche "Salut je m'affiche chaque 
seconde" toutes les secondes

A noter que setInterval va se stopper si vous quittez la page web. Sinon vous pouvez le stopper manuellement.

clearInterval

ClearInterval fonctionne exactement comme clearTimeout. Il va permettre de stopper l’exécution d’un setInterval. Voyons un exemple sans plus tarder :

let t;
function helloWorld(){
    console.log("Salut, je m'affiche chaque seconde");
}
t = setInterval(helloWorld,1000); //Affiche "Salut je m'affiche chaque 
seconde" toutes les secondes
clearInterval(t); // Stop l'exécution du setInterval

Attention au grand n’importe quoi!

Je tiens à vous mettre en garde, ne faites pas ça. Oui vous qui mettez des setTimeout pour attendre qu’un serveur vous envoie une réponse. Par pitié géré cela avec des promises. Promises que nous verrons ultérieurement en détails.

L’utilisation de setTimeout et setInterval doit donc être très occasionnel.

J’espère que cet article vous a plu.

Si vous voulez aller plus loin dans votre apprentissage en javascript, je ne peux que vous conseiller de lire cet article :
http://pierreterrat.com/javascript-:-le-guide-ultime-pour-bien-commencer-a-apprendre/

Beaucoup d’efforts et de temps sont passés pour vous fournir du contenu de qualité, merci de partager et de commenter cet article pour faire vivre ce blog.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *