如何在JavaScript中按循环切换的时间间隔永久执行函数？

要实现按5s→10s→15s循环间隔执行myFunction()，同时同步切换对应按钮的激活状态，不能用setInterval（无法动态更新间隔），也不能用阻塞线程的while(true)，可以用**递归式setTimeout**来实现，这是最适合动态调整间隔的异步循环方案。

实现代码 #

假设你的按钮HTML结构如下：

<button id="btn5s">5s</button>
<button id="btn10s">10s</button>
<button id="btn15s">15s</button>

对应的JavaScript代码：

// 获取按钮元素
const btn5s = document.getElementById('btn5s');
const btn10s = document.getElementById('btn10s');
const btn15s = document.getElementById('btn15s');

// 定义间隔序列和对应按钮，保持顺序一致：5s→10s→15s
const intervalSequence = [
  { time: 5000, btn: btn5s },
  { time: 10000, btn: btn10s },
  { time: 15000, btn: btn15s }
];

// 当前序列索引，初始从第一个开始
let currentIndex = 0;

// 标记激活状态的函数
function setActiveBtn(targetBtn) {
  // 移除所有按钮的激活类
  [btn5s, btn10s, btn15s].forEach(btn => btn.classList.remove('active'));
  // 给目标按钮添加激活类
  targetBtn.classList.add('active');
}

// 核心循环执行函数
function executeCycle() {
  // 获取当前间隔和对应按钮
  const { time, btn } = intervalSequence[currentIndex];
  
  // 执行目标函数
  myFunction();
  
  // 设置当前按钮为激活状态
  setActiveBtn(btn);
  
  // 更新索引，循环回到开头
  currentIndex = (currentIndex + 1) % intervalSequence.length;
  
  // 递归设置下一次执行
  setTimeout(executeCycle, time);
}

// 启动循环
executeCycle();

关键逻辑说明 #

• 用数组intervalSequence维护间隔时间和对应按钮的映射，保证顺序循环的一致性
• 递归调用setTimeout替代while(true)，避免阻塞浏览器主线程
• 每次执行后更新序列索引，通过取模运算实现循环
• setActiveBtn函数统一处理按钮激活状态的切换，确保同一时间只有一个按钮处于激活状态

注意事项 #

• 给激活按钮添加active类后，需要在CSS中定义激活样式（比如背景色、边框等），让用户看到状态变化
• 如果需要中途停止循环，可以保存setTimeout返回的ID，调用clearTimeout(id)即可

内容的提问来源于stack exchange，提问作者Soumya Khanda