JavaScript setInterval()

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

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

• setInterval()
• setTimeout()

在本教程中，您将了解 setInterval() 方法。

JavaScript setInterval()

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

JavaScript setInterval 的常用语法是：

setInterval(function, milliseconds);

其参数为

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

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

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

// program to display a text using setInterval method
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 秒显示一次时间

// program to display time every 5 seconds
function showTime() {

    // return new date and time
    let dateTime= new Date();

    // return the time
    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 Date and Time。

JavaScript clearInterval()

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

clearInterval() 方法的语法是：

clearInterval(intervalID);

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

示例 3：使用 clearInterval() 方法

// program to stop the setInterval() method after five times

let count = 0;

// function creation
let interval = setInterval(function(){

    // increasing the count by 1
    count += 1;

    // when count equals to 5, stop the function
    if(count === 5){
        clearInterval(interval);
    }

    // display the current time
    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。

例如，

// program to display a name
function greet(name, lastName) {
    console.log('Hello' + ' ' + name + ' ' + lastName);
}

// passing argument to setInterval
setInterval(greet, 1000, 'John', 'Doe');

输出

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

在上面的程序中，将两个参数 John 和 Doe 传递给 setInterval() 方法。这两个参数将作为参数传递给在 setInterval() 方法中定义的函数（此处为  greet() 函数）。

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