| Accueil | table JavaScript | index JavaScript | précédent | suivant |

Actions différées et périodiques

La fonction setTimeout() permet de déclencher une action différée :

ref_timer=setTimeout("action(---)", n) la fonction action() sera exécutées après un délai de n millisecondes. ref_timer est la référence du compteur qui déclenche l'exécution.

clearTimeout(ref_timer) remet à zéro le compteur.

La fonction setInterval() permet de répéter une action périodiquement  :

ref_timer=setInterval("action(---)", n) la fonction action() sera répétée toutes les n millisecondes. ref_timer est la référence du compteur qui déclenche l'exécution.

clearInterval(ref_timer) stoppe l'exécution de la fonction.

Le script suivant donne un exemple d'emploi de ces fonctions.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Titre de cette page : exemple30</title>
<meta name="description" content="site http://www.construireunsite.fr" />
<meta name="keywords" content="mot1 mot2, mot3 mot4 mot5, mot6" />
<link rel="stylesheet" type="text/css" href="Jstyle01.css" />

<script type="text/javascript">

var compte=0;

function compter()
{

compte++;
var val=document.getElementsByTagName("p");
val[1].innerHTML="comptage : "+compte.toString();

}

var timer1, timer2; // timers

function start()
{

timer1=setTimeout(function(){count();}, 5000);

}

function stop()
{

clearInterval(timer2);

}

function count()
{

timer2=setInterval(function(){compter()}, 1000);

}

</script>
</head>

<body>

<!-- Jscript30 -->
<div id="cadre1">
<h2>Actions différées et périodiques</h2>

<p class="texte1">
Comptage par la fonction setInterval()<br/>
Le comptage débute 6 secondes après appui sur le bouton "départ"<br/>
Ce délai est obtenu par la fonction setTimeout()<br/>
Le comptage est arrêté par le bouton "stop"
</p>
<p class="texte1">
comptage :
</p>

<p class="texte1">
<input type="button" name="start" value="départ" onclick="start()" title="départ"/>
<input type="button" name="stop" value="stop" onclick="stop()" title="stop"/>

</p>

</div>

</body>
</html>


Afficher cette page



suivant