JavaScript 中怎样每 5 秒钟重复调用一个函数

在 JavaScript 开发中，经常会遇到需要每隔一段时间就重复执行某个函数的需求，比如实时更新数据、动画效果的循环等。每 5 秒钟重复调用一个函数就是这样一个典型场景，下面就来探讨一下实现方法。

使用 setInterval() 方法

setInterval() 是 JavaScript 中用于实现定时重复执行代码的内置函数。它接受两个参数，第一个参数是要执行的函数（可以是函数名或者函数表达式），第二个参数是执行间隔的时间（以毫秒为单位）。

示例代码如下：

function myFunction() {
    console.log('这个函数每 5 秒钟被调用一次');
}
setInterval(myFunction, 5000);

在上述代码中，myFunction 函数会每隔 5000 毫秒（即 5 秒钟）被调用一次，每次调用时会在控制台输出相应的信息。

使用 setTimeout() 方法实现循环调用

虽然 setTimeout() 通常用于一次性延迟执行代码，但也可以通过递归调用来实现类似 setInterval() 的效果。

示例代码如下：

function myFunction() {
    console.log('这个函数每 5 秒钟被调用一次');
    setTimeout(myFunction, 5000);
}
setTimeout(myFunction, 5000);

在这段代码中，首先通过 setTimeout() 延迟 5000 毫秒后调用 myFunction 函数。在 myFunction 函数内部，又再次调用 setTimeout()，这样就实现了每 5 秒钟重复调用该函数的效果。

清除定时任务

无论是使用 setInterval() 还是 setTimeout() 实现的定时调用，在某些情况下，我们可能需要停止这个定时任务。对于 setInterval()，可以使用 clearInterval() 方法；对于 setTimeout()，则使用 clearTimeout() 方法。

例如，在使用 setInterval() 的场景下：

function myFunction() {
    console.log('这个函数每 5 秒钟被调用一次');
}
let intervalId = setInterval(myFunction, 5000);
// 在某个时刻，比如点击一个按钮后停止定时任务
document.getElementById('stopButton').addEventListener('click', function() {
    clearInterval(intervalId);
});

通过保存 setInterval() 返回的 ID，在需要时调用 clearInterval() 就可以停止定时任务。

在 JavaScript 中实现每 5 秒钟重复调用一个函数，setInterval() 和 setTimeout() 各有特点，开发者可以根据具体的需求场景来选择合适的方法，同时也要注意适时清除定时任务，避免内存泄漏等问题。