如何使用 JavaScript 在运行时更改 setinterval() 方法的时间间隔？-js教程-PHP中文网

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

PHPz

发布： 2023-09-07 23:45:10

转载

1452人浏览过

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

setInterval() 方法用于在圆括号中作为参数指定的特定时间间隔后一次又一次地调用特定的代码块。 setInterval() 方法接受两个参数，第一个参数是需要反复执行的代码，第二个参数是需要再次执行代码的时间。

在本文中，我们将学习在运行时更改 setInterval() 方法的时间间隔的方法。这样，它将以不规则或可变的时间间隔执行给定的代码。

JavaScript 为我们提供了两种不同的内置方法来更改 setInterval() 方法的时间间隔，如下所示 -

使用clearInterval()方法。

立即学习“Java免费学习笔记（深入）”；
使用 setTimeout() 方法。

让我们分别详细了解这两种方法的工作原理和实现。

使用clearInterval()方法

clearInterval()方法用于清除或停止之前执行的setInterval()函数。我们可以使用此方法来更改 seInterval() 方法的时间间隔，方法是在传递给 setInterval() 的函数内部调用此函数，它将清除先前调用的 setInterval() 方法并使用我们将在代码中定义新的时间值。

语法

以下语法将向您展示如何使用clearInterval()方法来清除之前的setInterval()方法 -

clearInterval( code to be executed, time interval );

登录后复制

让我们实际了解这个方法，并使用 JavaScript 中的clearInterval() 方法更改 setInterval() 方法的时间。

算法

步骤 1 - 在第一步中，我们将在 HTML 文档中添加两个不同的按钮，其中一个用于开始间隔，另一个用于停止间隔。
第 2 步 - 在此步骤中，我们将使用 JavaScript 中的 ID 从 HTML 文档中获取所有必需的元素，以在其中执行更改。
第3步 - 在下一步中，我们将定义一个JavaScript函数，其中首先使用clearInterval()方法清除之前的setInterval()，然后用一些新值，并使用我们在此步骤中定义的函数再次调用 setInterval() 方法。
第 4 步 - 在最后一步中，我们将定义另一个 JavaScript 函数，以使用clearInterval() 方法停止 setInterval() 的执行。

示例

下面的示例将帮助您通过深入研究代码来实际理解上述算法 -

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

登录后复制

在上面的示例中，我们使用clearInterval()方法在运行时使用JavaScript更改setInterval()方法的时间间隔。

使用setTimeout()方法

setTimeout() 方法与 setInterval() 方法类似。它还会在特定时间间隔后调用一段代码，但与 setInterval() 不同，它只会执行代码一次，而不是一次又一次地执行。 setTimeout() 方法在执行一次代码后会自动停止，因此我们不需要像 setInterval() 方法那样调用clearInterval() 方法来停止执行前一个时间间隔。

语法

按照以下语法使用 setTimeout() 方法更改时间间隔 -

setTimeout( code to be executed, time interval );

登录后复制

现在让我们借助 JavaScript 代码示例了解此方法的实际实现。

算法

这个方法的算法和之前的方法几乎是一样的。您只需要执行一些小的更改，如下所示 -

从之前算法的start()函数中删除clearInterval()方法。
使用 setTimeout() 方法设置间隔变量的值，而不是具有相同参数的 setInterval() 方法。

示例

下面的例子将解释setTimeout方法的实际使用，并帮助您理解之前算法中的上述变化，您需要执行 -

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

登录后复制

在此示例中，我们使用 JavaScript 的 setTimeout() 方法来使用 JavaScript 更改运行时每次调用的时间间隔。

在本文中，我们了解了 setInterval() 方法更改时间间隔的两种不同方法。我们通过所需的理论详细讨论了这两种方法，并借助每种方法的单独代码示例来实际实现。

以上就是如何使用 JavaScript 在运行时更改 setinterval() 方法的时间间隔？的详细内容，更多请关注php中文网其它相关文章！