如何批量编写多个第二个参数相同的setInterval()

完全不需要为相同触发间隔的函数重复注册多个setInterval，这种写法不仅冗余，还会额外增加浏览器事件循环的调度开销，最合理的方案是用统一调度入口合并所有同间隔任务：

具体实现 #

1. 先把所有需要按1秒间隔执行的函数统一放到数组中管理，后续新增/移除任务只需要修改这个数组即可

// 原有三个业务函数保持不变
function getAnalog(){
  return 'something';
}
function getDigital(){
  return 'something';
}
function getDate(){
  return 'something';
}

// 所有1秒间隔执行的任务统一归集
const taskList = [getAnalog, getDigital, getDate];

2. 封装统一执行方法，初始化时先执行一次完成首次渲染，之后只注册一个1秒间隔的定时器即可

// 遍历执行所有任务
const runAllTasks = () => taskList.forEach(task => task());

// 首次渲染
runAllTasks();
// 仅需注册一个定时器
setInterval(runAllTasks, 1000);

方案优势 #

• 维护成本低：后续新增同间隔的更新逻辑时，只需要把对应函数加入taskList数组，不需要重复写定时器绑定和初始化调用代码
• 性能开销小：每个定时器都会占用独立的调度资源，合并后仅保留一个定时器实例，能减少事件循环的调度压力
• 渲染同步性好：多个独立定时器即使配置了相同间隔，也可能因为事件循环的调度机制出现微小的执行时间差，合并调度后所有UI更新逻辑的执行时机完全一致，不会出现时钟不同模块刷新不同步的问题
• 清理逻辑简单：如果后续需要销毁时钟、停止定时更新，只需要保存这一个定时器的ID，调用一次clearInterval即可，不需要逐个清理多个定时器实例

// 需要停止更新时的逻辑参考
const clockTimer = setInterval(runAllTasks, 1000);
// 停止时执行: clearInterval(clockTimer)

内容的提问来源于stack exchange，提问作者Rocky Barua