如何用JavaScript按指定时间间隔将hiddenArray元素逐个推入uiArray？

开发者阿泽

2026-7-26

正确实现按间隔逐个推入数组元素的方案

你的现有代码存在几个问题：

每次向uiArray推入的是包含整个hiddenArray的对象，而非数组中的单个元素
没有控制推送的索引，无法实现“逐个”推送的逻辑
缺少停止条件，setInterval会无限运行下去

以下是两种可行的解决方案：

方案一：使用setInterval实现

维护一个索引变量，每次触发定时器时推送当前索引的元素，索引递增，当索引超出数组长度时清除定时器：

const hiddenArray = props.data;
const uiArray = [];
let currentIndex = 0;

const intervalId = setInterval(() => {
  // 检查是否还有未推送的元素
  if (currentIndex >= hiddenArray.length) {
    clearInterval(intervalId); // 停止定时器
    console.log("所有元素推送完成", JSON.stringify(uiArray));
    return;
  }
  // 推送当前索引的单个元素
  uiArray.push(hiddenArray[currentIndex]);
  console.log("当前uiArray:", JSON.stringify(uiArray));
  currentIndex++;
}, 2000);

方案二：使用setTimeout递归实现

通过递归调用setTimeout，每次推送一个元素后设置下一次的定时器，直到所有元素推送完成：

const hiddenArray = props.data;
const uiArray = [];
let currentIndex = 0;

function pushNextElement() {
  if (currentIndex >= hiddenArray.length) {
    console.log("所有元素推送完成", JSON.stringify(uiArray));
    return;
  }
  uiArray.push(hiddenArray[currentIndex]);
  console.log("当前uiArray:", JSON.stringify(uiArray));
  currentIndex++;
  // 设置下一次推送的定时器
  setTimeout(pushNextElement, 2000);
}

// 启动推送流程
pushNextElement();

两种方案的区别：