JavaScript setInterval() 函数

JavaScript setInterval() 语法

setInterval() 是 JavaScript 的一个全局函数（也叫 “全局方法” ），它用于实现重复执行的定时器。

在浏览器环境中，setInterval() 是 window 对象的方法。在 Node.js 环境中，它是 global 对象的方法。

语法：

setInterval(fn, delay, arg1, arg2, ..., argN)
setInterval(code, delay)        // 不推荐使用此形式

说明：

setInterval() 方法接收以下 3 种参数。

• fn（必选）：是一个函数。
• delay（可选）：定时器每次执行的间隔时间，单位是毫秒。比如 1000 表示 1 秒。
• arg1, arg2, ..., argN（可选）：传递给回调函数 fn 的附加参数。

setInterval(fn, delay) 表示每隔 delay 时间，都会执行一次 fn 中的内容。

setInterval() 会返回一个值（浏览器返回一个正整数、Node.js 返回一个对象），该值用于标识定时器的 ID。我们可以将此 ID 与 clearInterval() 一起使用，从而达到取消定时器的目的。

对于 setInterval()，小伙伴们还要清楚以下几点。

• setInterval() 是异步执行的，它不会阻塞主线程。
• setInterval() 实现的定时器是可以重复执行的。如果想要实现只会执行一次的定时器，我们应该使用 setTimeout()。

JavaScript setInterval() 摘要

JavaScript setInterval() 示例

接下来，我们通过几个简单的例子来讲解一下 JavaScript setInterval() 方法是如何使用的。

示例 1：setInterval() 基本用法

setInterval(function() {
    console.log("欢迎来到绿叶网");
}, 2000);

运行之后，每隔 2 秒都会输出一段文本。

欢迎来到绿叶网
欢迎来到绿叶网
……
欢迎来到绿叶网

分析：

上面例子实现的功能是：过了 2 秒钟后，输出一段文本。现在有了 ES6 箭头函数，一般情况下都是写成下面形式。

// 推荐
setInterval(() => {
    console.log("欢迎来到绿叶网");
}, 2000);

如果回调函数的逻辑比较复杂，有一个比较好的开发规范就是：把回调函数单独定义成一个函数，然后通过函数名来调用，比如写成：

function sayHi() {
    console.log("欢迎来到绿叶网");
}
setInterval(sayHi, 2000);

需要清楚的是，下面两种写法是等价的。但是我们不能写成：setInterval("sayHi", 2000)。

// 写法1（推荐）
setInterval(sayHi, 2000);

// 写法2
setInterval("sayHi()", 2000);

示例 2：setInterval() 的返回值

const timerID = setInterval(() => {
    console.log("Hello JavaScript");
}, 20000);
console.log(timerID);

运行结果如下。

4

分析：

setInterval() 会返回一个整数值，用于标识是哪一个定时器。一个程序内可能会有多个定时器，如果你需要使用到 clearInterval() 来清除该定时器，就要用到 setInterval() 的返回值。因为该返回值标识了是哪个定时器，然后 clearInterval() 才知道要清除的定时器是哪个。

setInterval() 与 setTimeout() 的区别

setInterval() 与 setTimeout() 都是用于实现一个定时器，它们之间的区别如下。

• setInterval() 实现的定时器是可以重复执行，而 setTimeout() 实现的定时器只会执行一次。
• 对于 setInterval() 实现的定时器，应该使用 clearInterval() 来取消。而对于 setTimeout() 实现的定时器，应该使用 clearTimeout() 来取消。