recherche

Maison  >  Article  >  interface Web  >  Comment puis-je modifier l'intervalle de la méthode setinterval() lors de l'exécution à l'aide de JavaScript ?

Comment puis-je modifier l'intervalle de la méthode setinterval() lors de l'exécution à l'aide de JavaScript ?

PHPz
PHPzavant
2023-09-07 23:45:10953parcourir

La méthode

如何使用 JavaScript 在运行时更改 setinterval() 方法的时间间隔？

setInterval() est utilisée pour appeler un bloc de code spécifique encore et encore après un intervalle de temps spécifique spécifié comme paramètre entre parenthèses. La méthode setInterval() accepte deux paramètres. Le premier paramètre est le code qui doit être exécuté à plusieurs reprises et le deuxième paramètre est l'heure à laquelle le code doit être à nouveau exécuté.

Dans cet article, nous apprendrons comment modifier l'intervalle de temps de la méthode setInterval() au moment de l'exécution. De cette façon, il exécutera le code donné à intervalles irréguliers ou variables.

JavaScript nous fournit deux méthodes intégrées différentes pour modifier l'intervalle de temps de la méthode setInterval() comme indiqué ci-dessous -

  • Utilisez la méthode clearInterval().

  • Utilisez la méthode setTimeout().

Apprenons-en davantage sur le principe de fonctionnement et la mise en œuvre de ces deux méthodes respectivement.

Utilisez la méthode clearInterval()

La méthode

clearInterval() est utilisée pour effacer ou arrêter la fonction setInterval() précédemment exécutée. Nous pouvons utiliser cette méthode pour modifier l'intervalle de temps de la méthode seInterval() en appelant cette fonction à l'intérieur de la fonction passée à setInterval() et elle effacera la méthode setInterval() précédemment appelée et utilisera la nouvelle que nous définirons dans le code. valeur temporelle.

Grammaire

La syntaxe suivante vous montrera comment utiliser la méthode clearInterval() pour effacer la méthode setInterval() précédente -

clearInterval( code to be executed, time interval );

Comprenons réellement cette méthode et modifions le timing de la méthode setInterval() à l'aide de la méthode clearInterval() en JavaScript.

Algorithme

  • Étape 1 - Dans la première étape, nous ajouterons deux boutons différents dans le document HTML, un pour démarrer l'intervalle et un autre pour arrêter l'intervalle.

  • Étape 2 - Dans cette étape, nous obtiendrons tous les éléments requis du document HTML en utilisant les identifiants en JavaScript pour y apporter des modifications.

  • Étape 3 - Dans l'étape suivante, nous définirons une fonction JavaScript où nous effaçons d'abord le setInterval() précédent en utilisant la méthode clearInterval(), puis avec une nouvelle valeur et à nouveau en utilisant la fonction que nous avons définie dans cette étape. Appelons setInterval () méthode.

  • Étape 4 - Dans la dernière étape, nous définirons une autre fonction JavaScript pour arrêter l'exécution de setInterval() à l'aide de la méthode clearInterval().

Exemple

Les exemples ci-dessous vous aideront à réellement comprendre l'algorithme ci-dessus en approfondissant le code -

<html>
<body>
   <h2>Change the Time Interval of setinterval() Method at RunTime using JavaScript</h2>
   <p id = "upper">The below text will print after a certain irregular interval of time every time.</p>
   <button id = "btn" onclick = "start()"> Start Printing </button>
   <button id = "stopbtn" onclick = "stop()"> Stop Printing </button>
   <p id = "print1"> </p>
   <p id = "result"> </p>
   <p id = "print2"> </p>
   <script>
      var result = document.getElementById("result");
      var upper = document.getElementById("upper");
      var printVal1 = document.getElementById("print1");
      var printVal2 = document.getElementById("print2");
      var interval, t = 500;
      function start() {
         printVal1.innerHTML = " Printing Starts: ";
         clearInterval(interval);
         result.innerHTML += " Printed after: <b> " + t + " </b> time. <br> ";
         t = t * 2;
         interval = setInterval(start, t);
      }
      function stop() {
         printVal2.innerHTML = " Printing Ends. ";
         clearInterval(interval);
      }
   </script>
</body>
</html>

Dans l'exemple ci-dessus, nous utilisons la méthode clearInterval() pour modifier l'intervalle de temps de la méthode setInterval() lors de l'exécution à l'aide de JavaScript.

Utilisez la méthode setTimeout()

La méthode

setTimeout() est similaire à la méthode setInterval(). Il appelle également un morceau de code après un intervalle spécifique, mais contrairement à setInterval(), il n'exécute le code qu'une seule fois au lieu de plusieurs fois. La méthode setTimeout() s'arrêtera automatiquement après avoir exécuté le code une fois, nous n'avons donc pas besoin d'appeler la méthode clearInterval() comme la méthode setInterval() pour arrêter l'exécution de l'intervalle de temps précédent.

Grammaire

Utilisez la méthode setTimeout() pour modifier l'intervalle de temps selon la syntaxe suivante -

setTimeout( code to be executed, time interval );

Voyons maintenant l'implémentation réelle de cette méthode à l'aide d'un exemple de code JavaScript.

Algorithme

L'algorithme de cette méthode est presque le même que la méthode précédente. Il vous suffit d'effectuer quelques petites modifications comme indiqué ci-dessous -

  • Supprimez la méthode clearInterval() de la fonction start() de l'algorithme précédent.

  • Utilisez la méthode setTimeout() pour définir la valeur de la variable d'intervalle au lieu de la méthode setInterval() avec les mêmes paramètres.

Exemple

L'exemple ci-dessous expliquera l'utilisation pratique de la méthode setTimeout et vous aidera à comprendre les modifications ci-dessus dans l'algorithme précédent que vous devez effectuer -

<html>
<body>
   <h2>Change the Time Interval of setinterval() Method at RunTime using JavaScript</h2>
   <p id = "upper">The below text will print after a certain irregular interval of time every time.</p>
   <button id = "btn" onclick = "start()">Start Printing</button>
   <button id = "stopbtn" onclick = "stop()">Stop Printing</button>
   <p id = "print1"> </p>
   <p id = "result"> </p>
   <p id = "print2"> </p>
   <script>
      var result = document.getElementById("result");
      var upper = document.getElementById("upper");
      var printVal1 = document.getElementById("print1");
      var printVal2 = document.getElementById("print2");
      var interval, t = 500;
      function start() {
         printVal1.innerHTML = " Printing Starts: ";
         result.innerHTML += " Printed after: <b> " + t + " </b> time. <br> ";
         t = t * 2;
         interval = setTimeout(start, t);
      }
      function stop() {
         printVal2.innerHTML = " Printing Ends. ";
         clearInterval(interval);
      }
   </script>
</body>
</html>

Dans cet exemple, nous utilisons la méthode setTimeout() de JavaScript pour modifier l'intervalle de temps entre chaque appel au moment de l'exécution à l'aide de JavaScript.

Dans cet article, nous avons découvert deux manières différentes de modifier l'intervalle de temps à l'aide de la méthode setInterval(). Nous discutons des deux approches en détail avec la théorie requise et la mise en œuvre pratique à l'aide d'exemples de code distincts pour chaque approche.

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 算法
Déclaration：
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Article précédent：Comment implémenter une case à cocher multi-entrées en JavaScript simple ?Article suivant：Comment implémenter une case à cocher multi-entrées en JavaScript simple ?

Articles Liés

Voir plus