如何在JavaScript中按时间间隔调用函数？

嘿，这个需求在JavaScript里太常见啦！主要有两种核心方法来实现定时重复调用函数，我给你拆解清楚，还有各自的适用场景：

这是最直接的方式——告诉浏览器每隔指定毫秒数就调用一次目标函数。

基本用法示例： #

// 定义你要定时调用的目标函数
function myTargetFunction() {
  console.log("函数被调用啦！");
}

// 设置每2000毫秒（2秒）调用一次，返回定时器ID，用来后续清理
const intervalId = setInterval(myTargetFunction, 2000);

// 如果你需要停止定时调用，用clearInterval
// clearInterval(intervalId);

注意点： #

• setInterval 是固定间隔触发，不管你的目标函数执行多久。比如如果函数执行花了3秒，但你设的间隔是2秒，那第一次执行还没结束，第二次调用就会排队（或者在某些情况下直接叠加执行），可能导致意外问题。
• 一定要保存返回的intervalId，当你不需要定时器的时候（比如页面卸载、功能关闭），调用clearInterval(intervalId)清理，避免内存泄漏。

如果你想确保上一次函数执行完成后，再开始计算下一次的间隔，递归调用setTimeout是更稳妥的选择，尤其适合函数里有异步操作（比如接口请求）的场景。

基本用法示例： #

function myTargetFunction() {
  console.log("函数被调用啦！");
  
  // 函数执行完后，设置下一次调用的间隔
  setTimeout(myTargetFunction, 2000);
}

// 启动第一次调用
let timeoutId = setTimeout(myTargetFunction, 2000);

// 更可控的版本：用开关控制是否继续执行
let isRunning = true;

function controlledTargetFunction() {
  if (!isRunning) return;
  
  console.log("受控函数被调用啦！");
  timeoutId = setTimeout(controlledTargetFunction, 2000);
}

// 启动受控版本
controlledTargetFunction();

// 停止时设置isRunning为false，也可以清理当前的timeoutId
// isRunning = false;
// clearTimeout(timeoutId);

优势： #

• 完全避免了setInterval的叠加问题，因为只有当前函数执行完毕（包括里面的异步操作完成后），才会触发下一次调用。
• 可以灵活调整下一次的间隔时间，比如根据函数执行结果动态改变间隔。

• JavaScript的定时器是基于事件循环的，不能保证绝对精确，尤其是当页面处于后台或者主线程被阻塞时，定时器会被延迟执行。如果需要高精度计时，可能需要用requestAnimationFrame结合时间差计算，但一般业务场景用上面两种就够了。
• 如果是在React、Vue等框架里使用，记得在组件卸载生命周期里清理定时器，比如React的useEffect返回函数里调用clearInterval/clearTimeout。

内容的提问来源于stack exchange，提问作者M Kattody