跳到主要内容

JavaScript setTimeout() 方法

提示
  1. 基本用法：JavaScript的setTimeout()方法用于在指定的毫秒数后执行一段代码，代码只执行一次。
  2. 定时和取消定时：setTimeout()返回一个正整数的间隔ID，可以使用clearTimeout()方法取消预定的定时器。
  3. 传递额外参数：setTimeout()允许传递额外的参数到定时执行的函数中，这些参数将被传递给指定的函数。

setTimeout() 方法用于在指定的时间后执行代码块。该方法只执行一次代码。

JavaScript中setTimeout常用的语法是：

setTimeout(function, milliseconds);

它的参数包括：

  • function - 包含代码块的函数
  • milliseconds - 执行函数之后的时间

setTimeout() 方法返回一个 intervalID，这是一个正整数。

示例 1：在3秒后显示文本一次​

// 使用setTimeout方法显示文本的程序
function greet() {
  console.log("Hello world");
}

setTimeout(greet, 3000);
console.log("This message is shown first");

输出

This message is shown first**
**Hello world

在上述程序中，setTimeout() 方法在 3000 毫秒（3 秒）后调用了 greet() 函数。

因此，程序在 3 秒后只显示一次 Hello world 文本。

注意：当您想在一段时间后只执行一次代码块时，setTimeout() 方法很有用。例如，在指定时间后向用户显示消息。

setTimeout() 方法返回间隔id。例如，

// 使用setTimeout方法显示文本的程序
function greet() {
  console.log("Hello world");
}

let intervalId = setTimeout(greet, 3000);
console.log("Id: " + intervalId);

输出

Id: 3
Hello world

示例 2：每3秒显示一次时间​

// 每3秒显示一次时间的程序
function showTime() {
  // 返回新的日期和时间
  let dateTime = new Date();

  // 返回当前的本地时间
  let time = dateTime.toLocaleTimeString();

  console.log(time);

  // 3秒后显示时间
  setTimeout(showTime, 3000);
}

// 调用函数
showTime();

输出

5:45:39 PM
5:45:43 PM
5:45:47 PM
5:45:50 PM
..................

上述程序每 3 秒显示一次时间。

setTimeout() 方法在时间间隔后（这里是 3 秒）只调用一次函数。

然而，在上述程序中，由于函数调用了自身，程序每 3 秒显示一次时间。

这个程序会无限运行（直到内存耗尽）。

注意：如果您需要多次执行一个函数，最好使用 setInterval() 方法。

JavaScript clearTimeout()​

如上例所示，程序在指定的时间间隔后执行代码块。如果您想停止这个函数调用，可以使用 clearTimeout() 方法。

clearTimeout() 方法的语法是：

clearTimeout(intervalID);

这里，intervalID 是 setTimeout() 方法的返回值。

示例 3：使用 clearTimeout() 方法​

// 停止 setTimeout() 方法的程序

let count = 0;

// 创建函数
function increaseCount() {
  // 计数增加1
  count += 1;
  console.log(count);
}

let id = setTimeout(increaseCount, 3000);

// clearTimeout
clearTimeout(id);
console.log("setTimeout is stopped.");

输出

setTimeout is stopped.

在上述程序中，setTimeout() 方法用于在3秒后增加 count 的值。然而，clearTimeout() 方法停止了 setTimeout() 方法的函数调用。因此，count 的值没有增加。

注意：当您需要在发生之前取消 setTimeout() 方法调用时，通常使用 clearTimeout() 方法。

您还可以向 setTimeout() 方法传递额外的参数。语法是：

setTimeout(function, milliseconds, parameter1, ....paramenterN);

当您向 setTimeout() 方法传递额外参数时，这些参数（parameter1、parameter2 等）将被传递给指定的 function。

例如，

// 显示名字的程序
function greet(name, lastName) {
  console.log("Hello" + " " + name + " " + lastName);
}

// 向setTimeout传递参数
setTimeout(greet, 1000, "John", "Doe");

输出

Hello John Doe

在上述程序中，两个参数 John 和 Doe 被传递给了 setTimeout() 方法。这两个参数是将传递给函数的参数（这里是 greet() 函数），该函数定义在 setTimeout() 方法内部。

推荐阅读： JavaScript async() 和 await()

最后于 更新