JavaScript setInterval 计时器重复调用函数
您将学习如何使用 JavaScript setInterval() 重复调用函数，并且每次调用之间有固定的延迟
2 min read
By
myfreax
在本教程中，您将学习如何使用 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() 的运行。
