Événements de synchronisation JavaScript
En utilisant JavaScript, nous avons la possibilité d'exécuter du code après un intervalle de temps défini, plutôt qu'immédiatement après l'appel de la fonction. Nous appelons cela un événement de timing.
Après avoir cliqué sur le bouton dans cet exemple, une boîte d'avertissement apparaîtra après 5 secondes :
<html>
<head>
<script type="text/javascript">
function timedMsg()
{
var t=setTimeout("alert('5 秒！')",5000)
}
</script>
</head>
<body>
<form>
<input type="button" value="显示定时的警告框" onClick = "timedMsg()">
</form>
<p>请点击上面的按钮。警告框会在 5 秒后显示。</p>
</body>
</html>Le programme dans cet exemple exécutera des timings de 2 secondes, 4 secondes et 6 secondes :
<html>
<head>
<script type="text/javascript">
function timedText()
{
var t1=setTimeout("document.getElementById('txt').value='2 秒'",2000)
var t2=setTimeout("document.getElementById('txt').value='4 秒'",4000)
var t3=setTimeout("document.getElementById('txt').value='6 秒'",6000)
}
</script>
</head>
<body>
<form>
<input type="button" value="显示计时的文本" onClick="timedText()">
<input type="text" id="txt">
</form>
<p>点击上面的按钮。输入框会显示出已经逝去的时间（2、4、6 秒）。</p>
</body>
</html>Dans cet exemple, après avoir cliqué sur le bouton Démarrer, le programme commence à compter en secondes à partir de 0
<html>
<head>
<script type="text/javascript">
var c=0
var t
function timedCount()
{
document.getElementById('txt').value=c
c=c+1
t=setTimeout("timedCount()",1000)
}
</script>
</head>
<body>
<form>
<input type="button" value="开始计时！" onClick="timedCount()">
<input type="text" id="txt">
</form>
<p>请点击上面的按钮。输入框会从 0 开始一直进行计时。</p>
</body>
</html>Dans cet exemple, après avoir cliqué sur le bouton de comptage, le programme commence le compte à rebours en fonction de la valeur saisi par l'utilisateur. Cliquez sur le bouton d'arrêt pour arrêter le timing
<html>
<head>
<script type="text/javascript">
var c=0
var t
function timedCount()
{
document.getElementById('txt').value=c
c=c+1
t=setTimeout("timedCount()",1000)
}
function stopCount()
{
c=0;
setTimeout("document.getElementById('txt').value=0",0);
clearTimeout(t);
}
</script>
</head>
<body>
<form>
<input type="button" value="开始计时！" onClick="timedCount()">
<input type="text" id="txt">
<input type="button" value="停止计时！" onClick="stopCount()">
</form>
<p>请点击上面的“开始计时”按钮来启动计时器。输入框会一直进行计时，从 0 开始。点击“停止计时”按钮可以终止计时，并将计数重置为 0。</p>
</body>
</html>Une petite horloge JavaScript :
<html>
<head>
<script type="text/javascript">
function startTime()
{
var today=new Date()
var h=today.getHours()
var m=today.getMinutes()
var s=today.getSeconds()
// add a zero in front of numbers<10
m=checkTime(m)
s=checkTime(s)
document.getElementById('txt').innerHTML=h+":"+m+":"+s
t=setTimeout('startTime()',500)
}
function checkTime(i)
{
if (i<10)
{i="0" + i}
return i
}
</script>
</head>
<body onload="startTime()">
<div id="txt"></div>
</body>
</html>Événement de timing JavaScript
En utilisant JavaScript, nous avons la possibilité de faites-le après un intervalle de temps défini pour exécuter le code au lieu d'immédiatement après l'appel de la fonction. Nous appelons cela un événement de timing.
Il est très simple d'utiliser des événements de synchronisation en JavaScript. Les deux méthodes clés sont :
setTimeout() Exécuter du code à un moment donné dans le futur clearTimeout() Annuler setTimeout()
setTimeout()
Syntaxe
var t=setTimeout("javascript Statement", milliseconds)
La méthode setTimeout() renverra une certaine valeur . Dans l'instruction ci-dessus, la valeur est stockée dans une variable nommée t. Si vous souhaitez annuler ce setTimeout(), vous pouvez le spécifier en utilisant ce nom de variable.
Le premier paramètre de setTimeout() est une chaîne contenant une instruction JavaScript. Il peut s'agir d'une instruction telle que "alert('5 seconds!')", ou d'un appel à une fonction telle que alertMsg()".
Le deuxième paramètre indique combien de millisecondes à partir de l'heure actuelle le premier Le paramètre sera exécuté.
Conseil : 1000 millisecondes équivaut à une seconde
Comment arrêter l'exécution ?
clearInterval(. ) est utilisée pour arrêter le code de fonction setInterval. () exécuté par la méthode
Syntaxe
window.clearInterval(intervalVariable)
window. La méthode clearInterval() ne peut pas utiliser le préfixe de fenêtre, utilisez directement la fonction clearInterval().
Pour utiliser la méthode clearInterval(), vous devez utiliser une variable globale lors de la création de la méthode de timing :
myVar=setInterval("javascript function",milliseconds);
Ensuite, vous pouvez utilisez la méthode clearInterval () pour arrêter l’exécution.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>时钟停止示例</title>
</head>
<body>
<p>页面上显示时钟：</p>
<p id="demo"></p>
<button onclick="myStopFunction()">停止时钟</button>
<script>
var myVar=setInterval(function(){myTimer()},1000);
function myTimer(){
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("demo").innerHTML=t;
}
function myStopFunction(){
clearInterval(myVar);
}
</script>
</body>
</html>
section suivante