如何在 JavaScript 中使用 setInterval 函数？

在本教程中，我们将学习如何在 JavaScript 中使用 setInterval 函数。

JavaScript 中的 setInterval() 方法以一定间隔计算表达式。它用于执行需要在特定时间间隔内执行的重复性任务或操作。例如，它以固定的时间延迟重复调用函数以执行任务。窗口接口提供此方法。

此方法返回一个唯一标识间隔的间隔 ID，允许您稍后通过执行 clearInterval() 方法将其删除。

用户可以按照以下语法使用 setInterval 函数。

语法

setInterval(function, time, parameter1, parameter2, ...)

在上述语法中，我们展示了 setInterval 函数执行其操作所需的所有参数。

参数

  • 函数 − 将在特定时间间隔内执行的函数或代码（必需）。

  • 时间 − 以毫秒为单位的时间间隔（必需）。

  • parameter1, parameter2,... − 传递给函数的参数（可选）。

返回类型

  • 数字 − setInterval 计时器的 ID。它用于通过将其传递到 clearInterval() 函数来停止 setInterval 计时器。

示例 1

使用 setInterval 函数创建数字时钟

在下面的示例中，我们使用了 JavaScript 中的 setInterval 函数来构建一个数字时钟。我们使用了 JavaScript 的 Date 构造函数来获取当前时间，然后每隔 1 秒更改一次元素的 inner text。document.getElementById() 方法用于访问元素对象，以更改元素的 innerHTML 以显示其中的当前时间。

<html>
<body>
   <h2>Using the<i> setInterval function</i> to build a digital clock in JavaScript</h2>
   <h4>Current Time:</h4>
   <span id = "root" style = "padding: 10px; background-color: lavender; border: 1px solid black;" >
   </span>
   <script>
      // element to show the current time
      const root = document.getElementById('root')

      // setInterval function
      setInterval(() => {

         // getting the local time
         const date = new Date();
         root.innerHTML = date.toLocaleTimeString();
      }, 1000);
   </script>
</body>
</html>

示例 2

使用 setInterval 函数启动和停止计数器

在下面的示例中，我们使用了 JavaScript 中的 setInterval 函数来递增计数器值，并通过两次按钮点击来停止计数器值。“开始”和“停止”这两个按钮，点击它们可以分别开始计数器值的递增或停止它。我们使用了 clearInterval() 函数来停止 setInterval 函数。

<html>
<body>
   <h2>Using the <i>setInterval function</i> to start and stop incrementing a counter value in JavaScript</h2>
   <button onclick = "startFunction()" >Start</button>
   <button onclick = "stopFunction()" >Stop</button>
   <h4>Counter value:</h4>
   <span id = "root" style = "padding: 10px; background-color: lavender; border: 1px solid black;" > 0 </span>
   <script>      
      // element to show the counter value
      const root = document.getElementById('root')

      // setInterval function id
      let intervalId = null

      // counter variable
      let counter = 0;

      // 'Start' button click handler function
      function startFunction(){

         // assigning the setInterval function to increment the counter value
         intervalId = setInterval(() => {
            root.innerHTML = counter
            counter++;
         }, 1000);
      }
      // 'Stop' button click handler function
      function stopFunction(){
         // stopping the setInterval function using the clearInterval function
         clearInterval(intervalId);
      }
   </script>
</body>
</html>

在本教程中，我们学习了如何在 JavaScript 中使用 setInterval 函数调用。我们讨论了此函数的语法、参数和返回类型。我们在两个示例中使用了 setInterval 函数来构建数字时钟和可控的增量计数器。此外，我们学习了 clearInterval 函数来停止 setInterval 计时器。用户可以参考这些示例来更好地理解 setInterval 函数的功能。

更新于：2022年10月31日

3K+ 次浏览

启动您的职业生涯

完成课程获得认证

开始学习
广告