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

setInterval()方法用于在给定的时间间隔后反复调用一段特定的代码。setInterval()方法接受两个参数，第一个是要反复执行的代码，第二个是代码要再次执行的时间间隔。

本文将介绍在运行时更改setInterval()方法的时间间隔的方法。这样，代码将以不规则或可变的时间间隔执行。

JavaScript提供了两种内置方法来更改setInterval()方法的时间间隔，如下所示：

使用clearInterval()方法。
使用setTimeout()方法。

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

使用clearInterval()方法

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

语法

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

clearInterval( code to be executed, time interval );

让我们通过实例来理解并使用clearInterval()方法来改变setInterval()方法的时间。

步骤

步骤1 - 在步骤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()方法在执行一次代码后自动停止，因此我们不需要调用clearInterval()方法来停止执行先前的间隔，这与setInterval()方法不同。

语法

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

setTimeout( code to be executed, time interval );

现在让我们通过JavaScript代码示例来了解该方法的实际实现。

步骤

该方法的算法与上一个方法几乎相同。你只需要进行一些小的更改，如下所列：

从上一个算法的start()函数中删除clearInterval()方法。
将interval变量的值设置为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()方法来在运行时每次调用时改变时间间隔。

在本文中，我们学习了改变setInterval()方法时间间隔的两种不同方法。我们详细讨论了这两种方法，并提供了所需的理论以及每种方法的实际实现，同时还提供了每种方法的个别代码示例。