JS中使用setInterval为数组变量定时赋值不生效如何解决？

原代码错误原因 #

• setInterval的返回值是数字类型的定时器唯一ID，仅用于后续调用clearInterval销毁定时器，不会返回你传入的date函数的执行结果，你当前把ID存入数组自然得不到动态更新的时间值。
• 你仅在mockData调用时执行了一次console.log，定时器每秒触发时不会自动执行打印逻辑，所以只能拿到静态的初始值。

修正后代码实现 #

// 生成目标时间片段值
function getDateVal() {
  const currentDate = Date.now();
  return String(currentDate).substr(8, 2);
}

// 存储定时更新的值
const intV = [];
// 可选：存储定时器ID，用于后续需要停止更新时调用
const timerIds = [];

function mockData(key) {
  // 避免变量名冲突，不要和入参重名
  const sampleEl = document.getElementById('sample');
  // 定时器逻辑全部写在回调函数内，每秒触发一次
  const timerId = setInterval(() => {
    // 需求1：对应key位置存储最新值，调用console.log(intV[key])可查看最新值
    intV[key] = getDateVal();
    // 需求2：如果要存储所有历史更新值，替换为下行代码即可
    // intV.push(getDateVal());

    // 每次更新后打印整个数组确认效果
    console.log(intV);
  }, 1000);
  // 保存定时器ID
  timerIds[key] = timerId;
}

// 测试调用，传入自定义key值即可
mockData(0);

补充说明 #

• 原代码存在变量名覆盖问题：入参v被函数内部重新声明的var v覆盖，实际拿到的是DOM元素，直接用DOM元素作为数组的key会被自动转为字符串，建议用自定义的数字/字符串作为key更稳妥。
• 如果需要停止某条定时更新任务，执行clearInterval(timerIds[对应key])即可。

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