JavaScript setInterval()方法

JavaScript中的setInterval()方法用于在每个给定的时间间隔重复指定的函数。它以给定的时间间隔评估表达式或调用函数。该方法继续调用函数，直到关闭窗口或调用clearInterval()方法为止。此方法返回一个数字值或一个非零数字，用于标识创建的计时器。

与setTimeout()方法不同，setInterval()方法多次调用该函数。可以在带有或不带有窗口前缀的情况下编写此方法。

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

句法

window.setInterval(function, milliseconds);

参数值

此方法采用两个参数值函数和ms，分别定义如下。

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

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

如何停止执行？

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

让我们通过一些插图来了解setInterval()方法的用法。

例1

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

 Hello World :) :) 
 This is an example of using the setInterval() method 
 Here, an alert dialog box displays on every three seconds. 

输出量

在三秒的时间间隔后，输出将为-

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

例2

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

 Hello World :) :) 
 This is an example of using the setInterval() method 
 Here, the background color changes on every 200 milliseconds. 

输出量

背景将每隔200毫秒从浅绿色变为浅蓝色。 200毫秒后，输出将为-

例子3

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

我们必须单击指定的停止按钮才能看到效果。

 Hello World :) :) 
 This is an example of using the setInterval() method 
 Here, the background color changes on every 200 milliseconds. 
 Stop 

输出量

背景颜色将在200毫秒后开始更改。单击指定的停止按钮后，颜色之间的切换将停止在相应的背景颜色上。单击按钮后的输出将是-