JavaScript - setInterval() 方法

JavaScript setInterval() 方法

在 JavaScript 中，setInterval() 是一个窗口方法，用于以特定间隔重复执行某个函数。setTimeout() 方法允许您在指定时间后仅执行一次该函数。

window 对象包含 setInterval() 方法。但是，您可以在不引用 window 对象的情况下执行 setInterval() 方法。

语法

以下是在 JavaScript 中使用 setInterval() 方法的语法

setInterval(callback,interval, arg1, arg2, ..., argN);

前两个参数是必需的，其他参数是可选的。

参数

• Callback − 每次间隔后执行的回调函数。
• Interval − 回调函数执行后的毫秒数。
• Arg1, arg2, arg3, , argN − 传递给回调函数的多个参数。

返回值

setInterval() 方法返回数字 ID。

示例

在下面的代码中，startTimer() 函数使用 setInterval() 方法每 1000 毫秒调用 timer() 函数。

timer() 函数增加每次通过 setInterval() 方法调用时，第二个全局变量的值都会被打印出来。

您可以点击按钮在输出中启动计时器。

<html>
<body>
   <button onclick = "startTimer()">Start Timer</button>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      var seconds = 0;
      function startTimer() {
         setInterval(timer, 1000); // 每秒调用一次 timer() 函数
      }
      function timer() { // 回调函数
         seconds++;
         output.innerHTML += "Total seconds are: " + seconds + "<br>";
      }
   </script>
</body>
</html>

输出

带有 setInterval() 方法的箭头函数

以下示例包含的代码与上例几乎相同。这里，我们将箭头函数作为 setInterval() 方法的第一个参数传递，而不是仅传递函数名称。您可以点击按钮来启动计时器。

示例

<html>
<body>
   <button onclick = "startTimer()">Start Timer</button>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      var seconds = 0;
      function startTimer() {
         setInterval(() => {
            seconds++;
            output.innerHTML += "Total seconds are: " + seconds + "<br>";
         }, 1000); // Calls timer() function after every second
      }
   </script>
</body>
</html>

输出

向 setInterval() 方法传递两个以上参数

在下面的代码中，我们向 setInterval() 方法传递了三个参数。第一个参数是用于打印日期的回调函数，第二个参数是间隔，第三个参数将传递给回调函数。

示例

<html>
<body>
   <button onclick = "startTimer()">Start Date Timer</button>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      var seconds = 0;
      function startTimer() {
         let message = "The date and time is: ";
         setInterval(printDate, 1000, message);
      }
      function printDate(message) {
         let date = new Date();
         output.innerHTML += message + date + "<br>";
      }
   </script>
</body>
</html>

输出

JavaScript 中的 clearInterval() 方法

JavaScript clearInterval() 方法用于停止使用 clearInterval() 方法启动的代码执行。

它以 setInterval () 方法返回的数字 ID 作为参数。

语法

请按照以下语法使用 clearInterval() 方法。

clearInterval(id);

此处的 id 是 setInterval() 方法返回的 id。

示例

在下面的代码中，我们使用 setInterval() 方法在每次增加 10 后以及每秒显示一次数字。

当数字达到 50 时，我们使用 clearInterval() 方法停止计时器。

<html>
<body>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      let number = 10;
      let id = setInterval(() => {
         if (number == 50) {
            clearInterval(id);
            output.innerHTML += "The time is stopped."
         }
         output.innerHTML += "The number is: " + number + "<br>";
         number += 10;
      }, 1000);
   </script>
</body>
</html>

输出

The number is: 10
The number is: 20
The number is: 30
The number is: 40
The time is stopped.The number is: 50

setInterval() 方法的实时用例

在上面的例子中，我们使用 setInterval() 方法打印了消息。在本节中，我们将了解 setInterval() 方法的实时用例。

这里，我们列出了一些实时用例。

• 刷新日期
• 幻灯片放映
• 动画
• 在网页上显示时钟
• 更新板球实时比分
• 更新天气信息
• 运行 cron 任务

以下是 setInterval() 方法的实时示例。

在每个间隔后翻转 HTML 元素的颜色

在下面的代码中，我们每秒翻转一次 <div> 元素的颜色。

我们在 HTML 主体中定义了 div 元素。

在 <head>在本节中，我们添加了 red 和 green 类。此外，我们还在 red 和 green 类中添加了背景颜色。

在 JavaScript 中，我们将回调函数作为 setInterval() 方法的第一个参数传递，该方法每 1000 毫秒调用一次。

我们在回调函数中使用 id 访问 <div> 元素。之后，我们检查 <div> 元素的 classList 是否包含 red 类。如果是，则移除它并添加 green 类。同样，如果 classList 包含 green 类，则移除它并添加 red 类。

这就是我们使用 setInterval() 方法翻转 <div> 元素颜色的方法。

示例

<html>
<head>
   <style>
      .red {background-color: red;}
      .green {background-color: green;}
      #square {height: 200px; width: 200px;}
   </style>
</head>
<body>
   <div>Using setInterval() method to flip the color of the HTML element after each interval</div>
   <div id = "square" class = "red"> </div>
   <script>
      let output = document.getElementById('output');
      setInterval(function () {
         let square = document.getElementById('square');
         if (square.classList.contains('red')) {
            square.classList.remove('red');
            square.classList.add('green');
         } else {
            square.classList.remove('green');
            square.classList.add('red');
         }
      }, 1000);
   </script>
</body>
</html>

输出

使用 setInterval() 方法创建移动动画

在下面的代码中，我们使用 setInterval() 方法创建移动动画。

我们创建了两个嵌套的 div 元素。外层 div 的 ID 为父级，内层 div 的 ID 为子级。我们已将两个 div 元素的尺寸和位置设置为相对。

在 JavaScript 中，我们将 left 变量初始化为 0。之后，我们每 50 毫秒调用一次 setInterval() 方法的回调函数。

在每个间隔内，我们更改 <div> 的位置。元素移动 5px，当左侧位置变为 450px 时，我们停止动画。

示例

<html>
<head>
   <style>
      #parent {
         position: relative; 
         height: 50px;
         width: 500px;
         background-color: yellow;
      }
      #child {
         position: relative; 
         height: 50px;
         width: 50px;
         background-color: red;
      }
   </style>
</head>
<body>
   <div id = "parent">
      <div id = "child"> </div>
   </div>
   <script>
      let child = document.getElementById('child');
      let left = 0;
      // Moving animation using the setInterval() method
      setInterval(() => {
         if (left < 450) {
            left += 5;
            child.style.left = left + 'px';
         }
      }, 50);
   </script>
</body>
</html>

输出

您也可以使用 setInterval() 方法异步运行特定代码。