js定时器每隔5秒执行一次|极客笔记

js定时器每隔5秒执行一次

在Javascript中，定时器是一种用来延迟执行代码或周期性执行代码的方法。定时器可以通过setTimeout和setInterval函数来实现。其中，setTimeout用于延迟执行一段代码，而setInterval用于按照指定的时间间隔周期性执行一段代码。在本文中，我们将重点介绍如何使用setInterval函数实现每隔5秒执行一次代码的功能。

使用setInterval函数实现定时执行

setInterval函数接受两个参数，第一个参数是需要执行的代码块或函数，第二个参数是时间间隔，单位为毫秒。当调用setInterval函数时，会返回一个唯一的标识符，可以用于取消定时器。

下面是一个简单的示例代码，展示如何使用setInterval函数每隔5秒输出一次当前时间：

function printCurrentTime() {
    const currentTime = new Date().toLocaleTimeString();
    console.log(`Current time: ${currentTime}`);
}

const intervalId = setInterval(printCurrentTime, 5000);

在上面的代码中，我们定义了一个名为printCurrentTime的函数，该函数用于输出当前时间。然后，我们调用setInterval函数，让printCurrentTime函数每隔5秒执行一次。最后，我们使用intervalId保存了定时器的唯一标识符，以便之后可以取消定时器。

取消定时器

如果我们需要在一定条件下取消定时器的执行，可以使用clearInterval函数。clearInterval函数接受一个参数，即要取消的定时器的标识符。以下是一个示例代码，展示如何在5次执行后取消定时器：

let count = 0;

function printCount() {
    console.log(`Count: ${count}`);
    count++;

    if (count >= 5) {
        clearInterval(intervalId);
        console.log('Timer cancelled');
    }
}

const intervalId = setInterval(printCount, 5000);

在上面的代码中，我们定义了一个名为printCount的函数，该函数用于输出一个计数器的值。然后，我们调用setInterval函数，让printCount函数每隔5秒执行一次。在printCount函数中，我们对count进行自增，并在计数达到5时调用clearInterval函数取消定时器的执行。

完整示例

下面是一个完整的示例，展示了如何使用setInterval函数每隔5秒输出一次当前时间，并在5次执行后取消定时器的执行：

let count = 0;

function printCurrentTime() {
    const currentTime = new Date().toLocaleTimeString();
    console.log(`Current time:  ${currentTime}`); } function printCount() { console.log(`Count:$ {count}`);
    count++;

    if (count >= 5) {
        clearInterval(intervalId);
        console.log('Timer cancelled');
    }
}

// 输出当前时间的定时器
const intervalId = setInterval(printCurrentTime, 5000);

// 输出计数的定时器
// const intervalId = setInterval(printCount, 5000);

在上面的示例中，我们定义了两个定时器，一个用于每隔5秒输出当前时间，另一个用于每隔5秒输出一个计数器的值。你可以选择注释其中一个并运行代码，观察定时器的执行效果。