JS 每 X 秒循环一次 - Javascript

循环执行代码是 JavaScript 中最基础的功能之一。如果您想要在某个时间间隔内重复执行某段代码，则可以使用 setInterval() 函数。setInterval() 方法会按照指定的时间间隔重复调用一个函数，直到被取消为止。本介绍将为您提供在 JavaScript 中轻松循环执行代码的方法。

setInterval() 方法

setInterval() 方法用于按照指定的时间间隔循环调用函数。它有两个参数：

• 要重复执行的函数。
• 以毫秒为单位的时间间隔。

例如，以下代码将每3秒钟在控制台打印一次 "Hello"：

setInterval(function() {
  console.log("Hello");
}, 3000);

clearInterval() 方法

要停止循环执行代码，需要使用 clearInterval() 方法。该方法用于取消通过 setInterval() 方法执行的代码循环。只需存储对 setInterval() 的引用，然后在需要停止循环时调用 clearInterval() 方法即可。

例如，以下代码仅在用户点击按钮时才开始打印“Hello”，并在5秒后停止：

let intervalId;

function startPrint() {
  intervalId = setInterval(function() {
    console.log("Hello");
  }, 1000);
}

function stopPrint() {
  clearInterval(intervalId);
}

document.querySelector('#startButton').addEventListener('click', startPrint);
document.querySelector('#stopButton').addEventListener('click', stopPrint);

setTimeout(stopPrint, 5000);

注意事项

使用 setInterval() 方法时，需要注意以下几个问题：

• 如果设定的时间间隔太小，那么可能无法正常工作，因为代码也需要一定的处理时间。
• 如果设定的时间间隔太大，那么可能会出现卡顿的现象。
• 如果在循环代码中发生错误，那么循环将立即停止。为了避免这种情况，请确保代码能够正常运行，或在循环中处理错误。

结论

在 JavaScript 中，使用 setInterval() 和 clearInterval() 方法可以很容易地实现循环执行代码的功能。如果您需要做一些定时任务或需要周期性地更新数据或 UI，则应该使用这些函数。记得合理设置时间间隔，以在性能和效率之间取得平衡。