JavaScript setTimeout() 函数

JavaScript setTimeout() 语法

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

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

语法：

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

说明：

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

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

setTimeout(fn, delay) 其实很容易理解，它表示过了 delay 时间后，再去执行 fn 中的内容。

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

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

• setTimeout() 是异步执行的，它不会阻塞主线程。
• setTimeout() 实现的定时器只会执行一次，而 setInterval() 实现的定时器是可以重复执行的。

JavaScript setTimeout() 摘要

JavaScript setTimeout() 示例

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

示例 1：setTimeout() 基本用法

setTimeout(function() {
    console.log("Hello JavaScript");
}, 2000);

运行之后过了 2 秒钟，会输出以下内容。

Hello JavaScript

分析：

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

// 推荐
setTimeout(() => {
    console.log("Hello JavaScript");
}, 2000);

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

function sayHi() {
    console.log("Hello JavaScript");
}
setTimeout(sayHi, 2000);

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

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

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

示例 2：setTimeout() 的返回值

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

console.log(timerID);

运行结果如下。

4

分析：

setTimeout() 会返回一个整数值，用于标识是哪一个定时器。一个程序内可能会有多个定时器，如果你需要使用到 clearTimeout() 来清除该定时器，就要用到 setTimeout() 的返回值。

示例 3：setTimeout() 是一个异步方法

console.log(1);
setTimeout(() => {
    console.log(2);
}, 0);
console.log(3);

运行结果如下。

1
3
2

分析：

首先我们要知道，setTimeout() 是一个异步任务。JavaScript 引擎从上到下执行时，如果遇到 setTimeout()，浏览器的渲染进程就会另外开一个定时器线程去执行。当定时器线程处理完了，就会通知 “事件触发线程” 将 “定时器的回调函数” 推送到任务队列的队尾。JavaScript 引擎是先把所有同步任务执行完，再去执行任务队列中的异步任务。

可能小伙伴就会问了：“setTimeout() 设置的时间间隔是 0 啊，它不是立即执行的吗？” 其实就算它的时间间隔为 0，但异步任务就是异步任务，它不会变成一个同步任务，也必须遵循事件循环的执行机制。对于这个例子来说，其分析如下图所示。

JavaScript 异步编程的内容非常复杂，不是一两篇文章可以讲得清楚，小伙伴们可以关注绿叶网的相关教程。

setTimeout() 与 setInterval() 的区别

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

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