É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 la fonction spécifiée en continu au 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() n'a pas besoin d'être utilisée le préfixe de la fenêtre, utilisez directement la fonction setInterval().
setInterval() Le premier paramètre est la fonction.
Le nombre de millisecondes entre les secondes
Remarque : 1000 millisecondes correspondent à une seconde.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>单击按钮每3秒出现一个“Hello”警告框。</p>
<p>再次点击警告框，经过3秒出现新的警告框，这将一直执行 ...</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
setInterval(function(){alert("Hello")},3000);
}
</script>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
L'exemple montre comment utiliser la méthode setInterval(), mais apparaître toutes les trois secondes n'est pas bon pour l'expérience utilisateur.
L'exemple suivant affichera l'heure actuelle. La méthode setInterval() définit le code à exécuter toutes les secondes, tout comme une montre.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>在页面显示一个时钟</p>
<p id="demo"></p>
<script>
var myVar=setInterval(function(){myTimer()},1000);
function myTimer(){
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("demo").innerHTML=t;
}
</script>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
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().
Grammaire
window.clearInterval() La méthode ne peut pas utiliser le préfixe de fenêtre, utilisez directement la fonction clearInterval() .
Pour utiliser la méthode clearInterval(), vous devez utiliser des variables globales lors de la création de la méthode de timing :
Ensuite, vous pouvez utiliser la méthode clearInterval() pour arrêter l'exécution.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</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>Exécuter l'instance »
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Méthode setTimeout()
Syntaxe
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é.
Astuce : 1000 millisecondes équivaut à une seconde
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>点击按钮，在等待 3 秒后弹出 "Hello"。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
setTimeout(function(){alert("Hello")},3000);
}
</script>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne.
Comment arrêter l'exécution ? La méthode
clearTimeout() est utilisée pour arrêter l'exécution de le code de fonction de la méthode setTimeout()
Syntaxe
La méthode window.clearTimeout() peut être utilisée sans le préfixe window
Pour utiliser la méthode clearTimeout(), vous devez utiliser une variable globale dans la méthode de délai de création (setTimeout) :
Si la fonction n'a pas encore été exécutée, vous pouvez utiliser la méthode clearTimeout() pour arrêter l'exécution du code de la fonction.
Exemple
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>点击第一个按钮等待3秒后出现"Hello"弹框。</p>
<p>点击第二个按钮来阻止第一个函数运行。（你必须在3秒之前点击它）。</p>
<button onclick="myFunction()">点我</button>
<button onclick="myStopFunction()">停止弹框</button>
<script>
var myVar;
function myFunction(){
myVar=setTimeout(function(){alert("Hello")},3000);
}
function myStopFunction(){
clearTimeout(myVar);
}
</script>
</body>
</html>Exécuter l'instance»
Cliquez sur " Bouton Exécuter l'instance » pour afficher l'instance en ligne
Plus d'exemples
Un autre timing simple
Exemple
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<head>
<script>
function timedText(){
var x=document.getElementById('txt');
var t1=setTimeout(function(){x.value="2 seconds"},2000);
var t2=setTimeout(function(){x.value="4 seconds"},4000);
var t3=setTimeout(function(){x.value="6 seconds"},6000);
}
</script>
</head>
<body>
<form>
<input type="button" value="显示文本时间!" onclick="timedText()" />
<input type="text" id="txt" />
</form>
<p>点击上面的按钮，输出的文本将告诉你2秒，4秒，6秒已经过去了。</p>
</body>
</html>Exemple d'exécution»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
