求助：如何修改JS的batchTimeouts函数以返回Timeout对象数组

问题分析 #

原代码硬编码循环次数为3，当传入的回调数组或延迟数组长度不等于3时，会访问undefined的数组元素，触发TypeError: cannot read properties of undefined错误。同时原函数没有返回值，无法获取每个setTimeout生成的Timeout对象数组。

修正后的代码 #

function batchTimeouts(callbacks, delays) {
  // 创建数组存储Timeout对象
  const timeoutObjects = [];
  // 遍历回调数组，适配任意长度的输入
  for (let i = 0; i < callbacks.length; i++) {
    // 跳过无效的回调或延迟项，避免报错
    if (typeof callbacks[i] !== 'function' || typeof delays[i] !== 'number') continue;
    // 保存setTimeout返回的Timeout对象
    const timeoutId = setTimeout(callbacks[i], delays[i]);
    timeoutObjects.push(timeoutId);
  }
  // 返回Timeout对象数组
  return timeoutObjects;
}

代码说明 #

• 用callbacks.length作为循环边界，兼容任意长度的输入数组
• 增加类型校验，跳过非函数类型的回调、非数字类型的延迟值，避免运行时异常
• 每次调用setTimeout后，将返回的Timeout对象存入数组，最终返回该数组

使用示例 #

const sayHello = () => console.log('hi');
const sayGoodbye = () => console.log('bye');
const shout = () => console.log('WHAT?');
const tasks = [sayHello, sayGoodbye, shout];
const delays = [500, 200, 900];

const timeoutObjs = batchTimeouts(tasks, delays); 
// 执行结果：
// 200ms后打印'bye'
// 500ms后打印'hi'
// 900ms后打印'WHAT?'

console.log(timeoutObjs); // [Timeout {...}, Timeout {...}, Timeout {...}]

内容的提问来源于stack exchange，提问作者Zayna A