É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.
Il est très simple d'utiliser des événements de synchronisation en JavaScript. Les deux méthodes clés sont :
setInterval() - Exécute le code spécifié en continu pendant le nombre de millisecondes spécifié.
setTimeout() - Exécute le code spécifié après une pause du nombre de millisecondes spécifié
Remarque : setInterval() et setTimeout() sont deux méthodes de l'objet HTML DOM Window.
Méthode setInterval()
setInterval() exécute le code spécifié en continu pendant le nombre de millisecondes spécifié
Syntaxe
window.setInterval("fonction javascript ",milliseconds);
la méthode window.setInterval() peut utiliser la fonction setInterval() directement sans utiliser le préfixe window.
setInterval() Le premier paramètre est la fonction.
Le nombre de millisecondes entre le deuxième paramètre
Remarque : 1000 millisecondes correspondent à une seconde.
"hello" apparaît toutes les trois secondes :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
setInterval(function(){alert("Hello")},3000);
}
</script>
</body>
</html>Comment arrêter l'exécution ?
la méthode clearInterval() est utilisée pour arrêter le code de fonction de l'exécution de la méthode setInterval() .
Syntaxe
window.clearInterval(intervalVariable)
window.clearInterval() peut utiliser la fonction clearInterval() directement sans utiliser le préfixe window.
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 utiliser la méthode clearInterval() pour arrêter l'exécution.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<script>
var t = self.setInterval("clock()",50)
function clock()
{
var time=new Date()
document.getElementById("clock_show").innerHTML=time
}
</script>
</head>
<body>
<p id="clock_show"></p>
<button onclick="window.clearInterval(t)">停止计时</button>
</body>
</html>méthode setTimeout()
Syntaxe
window.setTimeout("javascript function", milliseconds);
la méthode setTimeout() renverra un certain 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é.
Astuce : 1000 millisecondes est égal à une seconde
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
setTimeout(function(){alert("Hello")},3000);
}
</script>
</body>
</html>Comment arrêter l'exécution ?
La méthode clearTimeout() est utilisée pour arrêter l'exécution. du code de fonction de la méthode setTimeout().
Syntaxe
window.clearTimeout(timeoutVariable)
La méthode window.clearTimeout() peut être utilisée sans le préfixe window
Pour utiliser la méthode clearTimeout(), vous devez. Utiliser des variables globales lors de la création d'une méthode de timeout (setTimeout) :
myVar=setTimeout("javascript function",milliseconds);
Si la fonction n'a pas encore été exécutée, vous pouvez utiliser la méthode clearTimeout(). Arrêtez d'exécuter le code de la fonction
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<script>
var s = 0;
var n = 0;
var t;
function timeCount()
{
document.getElementById('second_show').value = s;
n = n+1;
s = n/10;
t = setTimeout("timeCount()",100);
}
</script>
</head>
<body>
<form>
<input type="button" value="开始计时" onClick="timeCount()">
<input type="text" id="second_show">
<input type="button" value="结束计时" onClick="clearTimeout(t)">
</form>
</body>
</html>
.section suivante
