Maison >interface Web >js tutoriel >Comment utiliser setTimeout() en JavaScript pour définir une minuterie

Comment utiliser setTimeout() en JavaScript pour définir une minuterie

青灯夜游original: 2018-12-10 14:33:088089parcourir

En JavaScript, en définissant la fonction à appeler ou les paramètres de chaîne de code à exécuter, ainsi que le paramètre de temps de retard sur la méthode setTimeout() ; une simple minuterie peut être définie en appelant la méthode setTimeout() ;

Dans JS, certaines méthodes natives sont fournies pour exécuter un certain morceau de code après un intervalle de temps défini ; la méthode setTimeout() définit un minuteur unique et est déclenchée. une seule fois après le délai spécifié. Jetons un coup d'œil à la façon dont la méthode setTimeout() définit le minuteur.

Méthode setTimeout()

setTimeout() : définit une minuterie unique et appelle une fonction ou une expression de calcul après le nombre spécifié de millisecondes ; Exécutera l'expression une fois après avoir retardé le temps spécifié pendant le chargement, et ne l'exécutera qu'une seule fois. [Tutoriels vidéo associés recommandés : Tutoriel JavaScript]

Syntaxe :

setInterval(code,millisec,lang);

Description du paramètre :

code : un paramètre obligatoire, indiquant le besoin appeler La fonction ou la chaîne de code à exécuter.

millisec : Un paramètre obligatoire, indiquant l'intervalle de temps avant l'exécution périodique ou appelant le "paramètre de code", mesuré en millisecondes (1s=1000ms).

paramètre facultatif lang.

Exemple de méthode setTimeout() :

code html :

<p>点击按钮，在等待 3 秒后弹出 "Hello"。</p>
<button onclick="myFunction()">点我</button>

code js :

function myFunction()
{
	setTimeout(function(){alert("Hello")},3000);
}

Rendu :

Comment utiliser setTimeout() en JavaScript pour définir une minuterie

setTimeout() définit une minuterie de boucle infinie

Utiliser la méthode setTimeout( ) peut également implémenter une minuterie de boucle infinie, nous devons écrire une fonction pour s'appeler. À ce stade, la méthode setTimeout() bouclera à l'infini. Si vous souhaitez arrêter le minuteur, vous devez utiliser la méthode clearTimeout().

Méthode clearTimeout()

clearTimeout() : utilisée pour annuler le minuteur défini par setTimeout(), utilisée lors de la définition de setTimeout() pour une boucle infinie.

Syntaxe :

clearTimeout(id_of_setTimeout);

Description du paramètre :

id_of_setTimeout : Représente la valeur d'ID renvoyée par setTimeout().

Remarque : Cette valeur identifie la fonction d'appel retardé ou la chaîne de code d'exécution retardée à annuler

Exemple combiné de la méthode setTimeout() et de la méthode clearTimeout()

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
  var num=0,i;
  function timedCount(){
    document.getElementById(&#39;txt&#39;).value=num;
    num=num+1;
    i=setTimeout(timedCount,1000);
  }
    setTimeout(timedCount,1000);
  function stopCount(){
    clearTimeout(i);
  }
</script>
</head>
<body>
  <form>
    <input type="text" id="txt">
    <input type="button" value="Stop" onClick="stopCount()">
  </form>
</body>
</html>

Rendu :

Comment utiliser setTimeout() en JavaScript pour définir une minuterie

On peut voir que le minuteur défini par setTimeout() boucle à l'infini au début, provoquant la zone de saisie Le nombre augmente constamment. Lorsque le bouton Stop est enfoncé, la méthode clearTimeout() sera appelée pour arrêter le timer setTimeout(). Le nombre cessera d'augmenter et restera au nombre 11.

Résumé : Ce qui précède représente l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'étude de chacun.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript html 循环 JS input

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Qu'est-ce que Bootstrap et comment l'utiliserArticle suivant：Qu'est-ce que Bootstrap et comment l'utiliser

Articles Liés

Voir plus