跳到主要内容

JavaScript setInterval() 方法

提示
  1. 周期性执行代码：JavaScript的setInterval()方法用于以指定的时间间隔重复执行代码块。
  2. 定时和取消定时：setInterval()返回一个正整数的间隔ID，可以使用clearInterval()方法取消预定的定时器。
  3. 传递额外参数：setInterval()允许传递额外的参数到定时执行的函数中，这些参数将被传递给指定的函数。

在 JavaScript 中，可以在指定的时间间隔内执行一段代码。这些时间间隔被称为定时事件。

有两种方法可以在特定间隔执行代码。它们是：

  • setInterval()
  • setTimeout()

在这个教程中，你将学习 setInterval() 方法。

JavaScript setInterval()​

setInterval() 方法重复在每个给定的定时事件执行一段代码。

JavaScript setInterval 常用语法是：

setInterval(function, milliseconds);

它的参数是：

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

setInterval() 方法返回一个 intervalID，它是一个正整数。

示例 1：每 1 秒显示一次文本​

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

setInterval(greet, 1000);

输出

Hello world
Hello world
Hello world
Hello world
Hello world
....

在上述程序中，setInterval() 方法每 1000 毫秒（1 秒）调用一次 greet() 函数。

因此，程序每 1 秒显示一次文本 Hello world。

注意：当你想多次重复执行一段代码时，setInterval() 方法很有用。例如，以固定间隔显示消息。

示例 2：每 5 秒显示时间​

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

  // 返回时间
  let time = dateTime.toLocaleTimeString();

  console.log(time);
}

let display = setInterval(showTime, 5000);

输出

"5:15:28 PM"
"5:15:33 PM"
"5:15:38 PM"
....

上述程序每 5 秒显示一次当前时间。

new Date() 给出当前日期和时间。而 toLocaleTimeString() 返回当前时间。要了解更多关于日期和时间，请访问 JavaScript 日期和时间。

JavaScript clearInterval()​

正如你在上面的示例中看到的，程序在每个指定的时间间隔执行一段代码。如果你想停止这个函数调用，那么你可以使用 clearInterval() 方法。

clearInterval() 方法的语法是：

clearInterval(intervalID);

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

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

// 在五次后停止 setInterval() 方法的程序

let count = 0;

// 创建函数
let interval = setInterval(function () {
  // 每次增加计数 1
  count += 1;

  // 当计数等于 5 时，停止函数
  if (count === 5) {
    clearInterval(interval);
  }

  // 显示当前时间
  let dateTime = new Date();
  let time = dateTime.toLocaleTimeString();
  console.log(time);
}, 2000);

输出

4:47:41 PM
4:47:43 PM
4:47:45 PM
4:47:47 PM
4:47:49 PM

在上述程序中，setInterval() 方法用于每 2 秒显示一次当前时间。clearInterval() 方法在 5 次后停止函数调用。

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

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

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

例如，

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

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

输出

Hello John Doe
Hello John Doe
Hello John Doe
....

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

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

最后于 更新