如何在运行时使用 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 );

让我们通过实践来了解此方法，并使用 JavaScript 中的 clearInterval() 方法更改 setInterval() 方法的时间。

算法

  • 步骤 1 - 在第一步中，我们将在 HTML 文档中添加两个不同的按钮，一个用于启动间隔，另一个用于停止间隔。

  • 步骤 2 - 在此步骤中，我们将使用 JavaScript 中的 ID 从 HTML 文档中获取所有必需的元素，以便对其进行更改。

  • 步骤 3 - 在下一步中，我们将定义一个 JavaScript 函数，其中首先使用 clearInterval() 方法清除先前的 setInterval()，然后使用一些新值更新时间，并使用在此步骤中定义的函数再次调用 setInterval() 方法。

  • 步骤 4 - 在最后一步中，我们将定义另一个 JavaScript 函数，以使用 clearInterval() 方法停止 setInterval() 的执行。

示例

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

Open Compiler
<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() 方法设置 interval 变量的值，而不是使用相同参数的 setInterval() 方法。

示例

下面的示例将解释 setTimeout 方法的实际用途，并且还将帮助您理解您需要在先前算法中执行的上述更改：

Open Compiler
<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() 方法时间间隔的两种不同方法。我们详细讨论了这两种方法，包括所需的理论以及每种方法的实际实现，并提供了相应的代码示例。

更新于：2023年2月17日

2K+ 浏览量

启动你的职业生涯

完成课程获得认证

开始学习
广告