JavaScript - setInterval() 方法

上一页
下一页

JavaScript setInterval() 方法

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

“window” 对象包含 setInterval() 方法。但是，您可以执行 setInterval() 方法，而无需将“window” 对象作为引用。

语法

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

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

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

参数

  • 回调函数 - 这是将在每个间隔后执行的回调函数。
  • 间隔 - 这是回调函数应执行后的毫秒数。
  • Arg1、arg2、arg3、…、argN - 它们是传递给回调函数的多个参数。

返回值

setInterval() 方法返回数字 ID。

示例

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

timer() 函数每次被 setInterval() 方法调用时都会增加“second”全局变量的值并打印计数器。

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

<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); // Calls timer() function after every second
      }
      function timer() { // Callback function
         seconds++;
         output.innerHTML += "Total seconds are: " + seconds + "<br>";
      }
   </script>
</body>
</html>

输出

JavaScript setInterval() Method

带有 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>

输出

Arrow Function with setInterval() Method

向 setInterval() 方法传递多个参数

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

示例

<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>

输出

Passing More than 2 Arguments to setInterval() Method

JavaScript 中的 clearInterval() 方法

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

它将 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 body 中定义了 div 元素。

在 <head> 部分，我们添加了“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>

输出

Flipping color of HTML element after each interval

使用 setInterval() 方法实现移动动画

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

我们创建了两个嵌套的 div 元素。外部 div 的 id 为 'parent'，内部 div 的 id 为 'child'。我们为这两个 div 元素设置了尺寸，并将位置设置为 'relative'。

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

在每个间隔内，我们将 <div> 元素的位置改变 5px，当 left 位置变为 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>

输出

Moving Animation Using setInterval() Method

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

打印页面
上一页
下一页
广告