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

setInterval()方法用于在一个特定的时间间隔后再次调用一个特定的代码块，这个时间间隔在圆括号中作为参数给到它。setInterval()方法接受两个参数，第一个是必须重复执行的代码，第二个是必须再次执行代码的时间。

在这篇文章中，我们将学习在运行时改变setInterval()方法的时间间隔的方法。这样，它就会在不规则或可变的时间间隔内执行指定的代码。

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

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

让我们详细了解一下这两个方法的工作和实现。

使用clearInterval()方法

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

语法

下面的语法将告诉你如何使用clearInterval()方法来清除之前的setInterval()方法 —

clearInterval( code to be executed, time interval );

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

算法

第1步 -- 在第1步中，我们将在HTML文档中添加两个不同的按钮，其中一个用于开始间隔时间，另一个用于停止间隔时间。
第2步– 在这一步，我们将从HTML文档中抓取所有需要的元素，在JavaScript中使用它们的ID，对它们进行修改。
第 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()方法来改变运行时每次调用时的时间间隔。

在这篇文章中，我们已经了解了改变setInterval()方法的时间间隔的两种不同方法。我们已经详细讨论了这两种方法的必要理论，以及在每种方法的单独代码示例的帮助下的实际实现。