0% ont trouvé ce document utile (0 vote)
25 vues5 pages

Utiliser setTimeout et setInterval en JS

Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
0% ont trouvé ce document utile (0 vote)
25 vues5 pages

Utiliser setTimeout et setInterval en JS

Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

Tutoriel JavaScript

Vue d'ensemble
Variables
Tableaux
Fonctions
PHP
Eval
Formulaire Widgets JavaScript
Expr. régulière Lightbox
Objets Bookmarklet
Window Onglets
Evènements Démo illusion

L'image
mystérieuse

SetTimeout et setInterval: Les délais en JavaScript


On peut en JavaScript déclencher des action après un intervalle de temps donné, ou de la répéter
après un intervalle de temps.

Les méthodes setTimeout et setInterval sont des méthodes de l'objet Window. On


peut donc écrire setTimeout ou [Link].
Ce sont des processus indépendants qui, quand ils sont lancés par une
instruction, ne bloquent pas l'affichage du reste de la page ni les actions de
l'utilisateur.

SetTimeout indique un délai avant exécution


Le méthode setTimeout définit une action à exécuter et un délai avant son exécution. Elle retourne un
:
identifieur pour le processus.

var x = setTimeout("instructions", délai en


millisecondes).

Exemple:

function mafonction() { ... }

setTimeout(mafonction, 5000);

La fonction sera exécutée après 5 secondes (5 000 millisecondes).

Le délai commence à l'instant où setTimeout est exécutée par l'interpréteur JavaScript, donc à partir
du chargement de la page si l'instruction est dans un script exécuté au chargement, où à partir d'une
action de l'utilisateur si le script est déclenché par celui-ci.

ClearTimeout interrompt le décompte de setTimeout

Cette méthode interrompt le délai et l'exécution du code associé à ce délai. Le processus à supprimer
est reconnu par l'identifieur retourné par setTimeout.

Syntaxe:

clearTimeout(identifieur);

Exemple:

var x = setTimeout(mafonction, 5000);


...
clearTimeout(x);

setInterval déclenche une opération à intervalles réguliers


Similaire à setTimeout, elle déclenche répétitivement la même action à intervalles réguliers.

setInterval("instructions", délai)
:
Exemple:

setInterval("alert(('bip')", 10000);

Affiche un message toutes les dix secondes.


L'action sera recommencée jusqu'à ce que l'on quitte la page ou que clearInterval soit exécutée.

clearInterval stoppe l'action de setInterval

Stoppe le processus déclenche par setInterval.

Exemple:

var x = setInterval(mafonction, 10000);


...
clearInterval(x);

Une fonction lambda peut être un argument


On peut définir une fonction dans les arguments de setTimeout ou setInterval.

Exemple:

var x = setTimeout(function() { alert("bip"); }, 2000);

L'intérêt est surtout d'utiliser une fonction récursive ce que l'on peut faire en désignant la fonction par
la variable: [Link].

Démonstration
Nous allons utiliser setInterval pour afficher le décompte des secondes.

La fonction finish après 10 secondes affiche le message "TERMINE" et stoppe le décompte par un
appel à clearInterval.

Cliquer sur le bouton pour commencer: Lancer le décompte


:
Code source:

<button onclick="start()">Lancer le décompte</button>


<div id="bip" class="display"></div>

<script>
var counter = 10;
var intervalId = null;
function finish() {
clearInterval(intervalId);
[Link]("bip").innerHTML = "TERMINE!";
}
function bip() {
counter--;
if(counter == 0) finish();
else {
[Link]("bip").innerHTML = counter
+ " secondes restantes";
}
}
function start(){
intervalId = setInterval(bip, 1000);
}
</script>

Autres démonstrations...

setTimeout et setInterval.
Comment modifier le contenu d'une page avec un délai ou à un intervalle de temps donnés.

Déclenchement d'un évènement à date donnée.


En combinant l'objet Date et la méthode setTimeout, on crée un "cron" en JavaScript.
:
Product Sourcing Made Easy
[Link]

rl video door bell


19,483 FCFA

OPEN

© 2010-2012 [Link]
:

Vous aimerez peut-être aussi