JavaScript setInterval 计时器指定时间重复调用函数

在本教程中，您将学习如何使用 JavaScript setInterval() 重复调用函数，并且每次调用之间有固定的延迟。

JavaScript setInterval 简介

setInterval() 是 window 对象的方法。setInterval() 重复调用一个函数，每次调用之间有固定的延迟。

下面是 setInterval 的语法形式：

let intervalID = setInterval(callback, delay,[arg1, arg2, ...]);

在这个语法中：

callback 是每 delay 毫秒执行一次回调函数。
delay 是计时器在执行回调函数之间应延迟的时间（以毫秒为单位）。
arg1, ...argN 是传递给回调函数的参数。

setInterval 返回一个非零数字，用于标识创建的计时器。您可以将 intervalID 传递给 clearInterval() 来取消超时。

请注意，setInterval() 工作原理与 setTimeout() 类似，但它会在每个指定的延迟后重复执行一次回调。

JavaScript setInterval 示例

以下示例使用 setInterval() 和 clearInterval() 在按下“开始”按钮后每秒更改一次标题的颜色。如果停止按钮，clearInterval()将取消超时。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>JavaScript setInterval Demo</title>

  <script>
    let intervalID;
 
    function toggleColor() {
      let e = document.getElementById('flashtext');
      e.style.color = e.style.color == 'red' ? 'blue' : 'red';
    }

    function stop() {
      clearInterval(intervalID);
    }

    function start() {
       intervalID = setInterval(toggleColor, 1000); 
    }
  </script>
</head>
 
<body>
  <p id="flashtext">JavScript setInterval Demo</p>
  <button onclick="start()">Start</button>
  <button onclick="stop()">Stop</button>
  
</body>
</html>

结论

setInterval() 以指定的延迟重复调用一个函数多次。它返回一个 intervalID 可以传递给 clearInterval() 来取消 setInterval() 的运行。