如何带延迟遍历数组并实现中途终止循环？

你需要的是一种逐次安排延迟执行的遍历方式，避免一次性创建所有定时器，这样中途清空数组就能终止后续操作。下面提供两种可行的实现方案：

方案一：递归式遍历 #

这种方式通过递归调用，每次处理完当前元素后才设置下一个定时器，不会提前生成所有延迟任务：

const array = [0.06, 0.08, 0.04, 0.05, 0.06, 0.03];
let currentIndex = 0;

// 核心遍历函数，delay为每次遍历的间隔毫秒数
function loop(arr, delay = 1000) {
  // 数组为空或索引越界时终止遍历
  if (!arr.length || currentIndex >= arr.length) return;

  // 处理当前元素（这里替换成你实际的业务逻辑）
  console.log(arr[currentIndex]);

  currentIndex++;
  // 仅安排下一次遍历的定时器
  setTimeout(() => loop(arr, delay), delay);
}

// 终止遍历的函数，通过清空数组实现
function userInputForStop() {
  array.length = 0;
}

// 启动遍历
loop(array);

// 测试：3秒后触发停止操作
setTimeout(userInputForStop, 3000);

方案二：Async/Await 遍历 #

利用异步函数的特性，让遍历流程更直观，同样不会一次性创建所有定时器：

const array = [0.06, 0.08, 0.04, 0.05, 0.06, 0.03];
let stopFlag = false;

// 封装延迟函数
function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

// 异步遍历函数
async function loop(arr, delayTime = 1000) {
  for (let i = 0; i < arr.length; i++) {
    // 检查停止条件：数组为空或触发停止标志
    if (stopFlag || arr.length === 0) break;

    // 处理当前元素
    console.log(arr[i]);
    // 等待延迟后再进行下一次遍历
    await delay(delayTime);
  }
}

// 终止遍历的函数
function userInputForStop() {
  array.length = 0;
  stopFlag = true;
}

// 启动遍历
loop(array);

// 测试：3秒后停止
setTimeout(userInputForStop, 3000);

关键优势 #

两种方案都解决了原方法的核心问题：

• 每次仅在当前元素处理完成后，才安排下一次遍历的延迟任务，不会一次性创建所有定时器
• 中途清空数组或设置停止标志后，下一次循环/递归会直接终止，不会执行后续操作

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