JavaScript setInterval 演示 - JavaScript 教程

摘要：在本教程中，您将学习如何使用 JavaScript setInterval() 以固定的延迟重复调用函数。

JavaScript setInterval() 简介

setInterval() 是 window 对象的方法。setInterval() 以固定的延迟重复调用函数。

以下是 setInterval() 语法的说明：

let intervalID = setInterval(callback, delay,[arg1, arg2, ...]);
Code language: JavaScript (javascript)

在此语法中

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>Code language: HTML, XML (xml)

输出

JavaScript setInterval 演示

总结

setInterval() 每隔固定的延迟重复调用一次函数。
setInterval() 返回一个 timeoutID，可以将其传递给 clearInterval() 以取消超时。

本教程对您有帮助吗？