JavaScript setInterval() 方法

JavaScript中的setInterval()方法用于在给定的时间间隔内重复执行指定的函数。它会在给定的时间间隔内计算表达式或调用函数。该方法会持续调用函数，直到窗口被关闭或调用clearInterval()方法。该方法返回一个用于标识创建的计时器的数值或非零数。

与setTimeout()方法不同，setInterval()方法会多次调用函数。该方法可以使用或不使用window前缀进行编写。

常用的setInterval()方法的语法如下：

语法

window.setInterval(function, milliseconds);

参数值

此方法接受两个参数值 function 和 milliseconds 定义如下。

function: 这是包含将要执行的代码块的函数。

milliseconds: 此参数表示每次执行之间的时间间隔长度。间隔以毫秒为单位。它定义代码将被执行的频率。如果它的值小于10，则使用值10。

如何停止执行

我们可以使用 clearInterval() 方法来停止在 setInterval() 方法中指定的函数的执行。由 setInterval() 方法返回的值可以作为 clearInterval() 方法的参数来取消超时。

让我们通过使用一些示例来理解 setInterval() 方法的使用。

示例1

这是使用 setInterval() 方法的简单示例。在这里，警报对话框以3秒的间隔显示。我们没有使用任何方法来停止在 setInterval() 方法中指定的函数的执行。所以该方法将继续执行函数，直到窗口关闭。

<html>
<head>
<title> setInterval() method </title>
</head>
<body>
<h1> Hello World :) :) </h1>
<h3> This is an example of using the setInterval() method </h3>
<p> Here, an alert dialog box displays on every three seconds. </p>

<script>

var a;

a = setInterval(fun, 3000);

function fun() {
alert(" Welcome to the javaTpoint.com ");
}</script>

</body>

</html>

输出

JavaScript setInterval() 方法

经过三秒的时间间隔后，输出结果将是 –

JavaScript setInterval() 方法

现在，这是使用 setInterval() 方法的另一个示例。

示例2

在这里，背景颜色将在每200毫秒更改一次。我们没有使用任何方法来停止 setInterval() 方法中指定的函数的执行。所以，该方法会继续执行该函数，直到窗口关闭。

<html>
<head>
<title> setInterval() method </title>
</head>
<body>
<h1> Hello World :) :) </h1>
<h3> This is an example of using the setInterval() method </h3>
<p> Here, the background color changes on every 200 milliseconds. </p>

<script>
var var1 = setInterval(color, 200);

function color() {
var var2 = document.body;
var2.style.backgroundColor = var2.style.backgroundColor == "lightblue" ? "lightgreen" : "lightblue";
}

</script>

</body>

</html>

输出
JavaScript setInterval() 方法

背景颜色将会在200毫秒的间隔内不断变化，从 lightgreen 到 lightblue 。200毫秒后，输出结果将为 –

JavaScript setInterval() 方法

示例3

在上面的示例中，我们没有使用任何方法来停止颜色之间的切换。在这里，我们使用 clearInterval() 方法来停止前一个示例中颜色的切换。

我们需要点击指定的停止按钮来看效果。

<html>
<head>
<title> setInterval() method </title>
</head>
<body>
<h1> Hello World :) :) </h1>
<h3> This is an example of using the setInterval() method </h3>
<p> Here, the background color changes on every 200 milliseconds. </p>
<button onclick = "stop()"> Stop </button>

<script>
var var1 = setInterval(color, 200);

function color() {
var var2 = document.body;
var2.style.backgroundColor = var2.style.backgroundColor == "lightblue" ? "lightgreen" : "lightblue";
}
function stop() {
clearInterval(var1);
}

</script>

</body>

</html>

输出

JavaScript setInterval() 方法