É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>

Formation continue

nouveau fichier

<!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>

soumettre Réinitialiser le code

Opération automatique

Événements de synchronisation JavaScript

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]