JavaScript setInterval()

2025年4月23日 | 阅读 3 分钟

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

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

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

语法

参数值

此方法接受两个参数值：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 TpointTech.com ");
}</script>

</body>

</html>

输出

三秒钟的时间间隔后，输出将是 -

现在，这是另一个使用 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>

输出

背景将以 200 毫秒的间隔在 lightgreen 和 lightblue 之间不断变化。200 毫秒后，输出将是 -

Example3

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

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

<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>

输出

背景颜色将在 200 毫秒后开始变化。点击指定的 stop 按钮后，相应背景颜色下的颜色切换将停止。点击按钮后的输出将是 -

下一个主题JavaScript 中的事件循环

← 上一个下一个 →

JavaScript setInterval()

语法

参数值

如何停止执行？

示例 1

示例 2

Example3

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

JavaScript 基础

JS 变量和数据类型

JS 控制语句

JavaScript 函数

JavaScript 对象

JS 高级函数

JS Promises & Async/Await

JavaScript DOM

JavaScript JSON 对象

JavaScript 验证

JavaScript Cookies

异常处理

JavaScript 集合

JavaScript 事件

JavaScript OOPs

JavaScript BOM

面试题

选择题

差异

JavaScript Map 方法

JavaScript Handler

JavaScript Number 方法

JavaScript Reflect

JavaScript Symbol

Symbol 属性

JavaScript Math 方法

JavaScript Date 方法

JavaScript DataView

JavaScript Object 方法

JavaScript Set 方法

JavaScript 字符串方法

JavaScript TypedArray 方法

JavaScript WeakMap 方法

JavaScript WeakSet 方法

JavaScript 数组方法

JavaScript RegExp 对象

JavaScript 附加内容

JavaScript 杂项

JavaScript 进阶

问题

Lodash

JavaScript setInterval()

语法

参数值

如何停止执行？

示例 1

示例 2

Example3

相关帖子

JavaScript 箭头函数

JavaScript setTimeout()

JavaScript 事件循环

JavaScript 回调函数

JavaScript 闭包

JavaScript 高阶函数

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题