如何在JavaScript函数中实现可变时间间隔的数值递增？

问题说明 #

原本使用固定9秒间隔的setInterval实现计数器递增，希望改为3秒、7秒、12秒、10秒、13秒的循环间隔（总时长45秒，平均仍为9秒），但setInterval启动后无法动态修改间隔，需要替换实现方式。

解决方案 #

使用setTimeout递归调用的方式，每次执行计数更新后，根据预设的间隔数组设置下一次的延迟，通过索引循环实现间隔的往复使用。

实现代码：

// 定义循环的间隔数组（单位：毫秒）
const intervals = [3000, 7000, 12000, 10000, 13000];
let shiftCounter = {{ row.total }};
let intervalIndex = 0;

function updateCounter() {
  // 更新DOM显示
  document.getElementById("shiftsCreated").innerHTML = shiftCounter.toLocaleString('en');
  // 计数器递增
  shiftCounter += 1;
  
  // 获取下一个间隔，索引循环（取模实现数组往复）
  const nextInterval = intervals[intervalIndex];
  intervalIndex = (intervalIndex + 1) % intervals.length;
  
  // 设置下一次计数更新
  setTimeout(updateCounter, nextInterval);
}

// 启动计数器
updateCounter();

代码说明 #

• intervals数组存储需要循环的间隔时长，已转换为毫秒
• intervalIndex记录当前使用的间隔索引，每次更新后递增，通过% intervals.length实现索引循环，用完数组最后一个元素后回到第一个
• updateCounter函数负责更新计数器显示、递增数值，并设置下一次的setTimeout，实现递归调用
• 首次调用updateCounter即可启动整个计数流程

内容的提问来源于stack exchange，提问作者Tom Mitchell