如何实现带延迟的数组分步遍历与有序执行程序？

要满足串行执行三个步骤、步内元素操作间隔1秒、步间等待2秒的需求，用JavaScript的async/await配合Promise封装的延迟函数是最直观的实现方式，以下是完整代码和关键说明：

核心实现代码 #

// 封装延迟函数，返回Promise以便用await等待
function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function processArray() {
  let array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

  // 第一步：遍历打印所有数字，每个元素间隔1秒
  console.log("// first process");
  for (const num of array) {
    console.log(num);
    await delay(1000);
  }
  console.log("// first process ends, 2 sec delay");
  await delay(2000);

  // 第二步：移除数组中的奇数
  console.log("// second process remove odd numbers from array");
  array = array.filter(num => num % 2 === 0);
  console.log("// second process ends, 2 sec delay");
  await delay(2000);

  // 第三步：遍历打印剩余偶数，每个元素间隔1秒
  console.log("// third process print all remaining numbers in array");
  for (const num of array) {
    console.log(num);
    await delay(1000);
  }
}

// 启动处理流程
processArray();

关键细节说明 #

• 串行遍历元素：使用for...of循环而非forEach，因为forEach的回调函数无法被await阻塞，会一次性触发所有定时器，无法保证元素操作的1秒间隔；而for...of会逐个等待await delay(1000)完成后再处理下一个元素。
• 步骤间的严格串行：每一步执行完毕后，通过await delay(2000)强制等待2秒，确保前一步完全结束后才进入下一步。
• 数组奇数移除：用filter方法简洁筛选出偶数，生成新数组（若需要修改原数组，可改用splice遍历删除，但filter更易读且无副作用）。

实际输出效果 #

运行代码后，输出会完全符合需求：

1. 依次打印1到10，每个数字间隔1秒；
2. 等待2秒后，执行奇数移除操作；
3. 再等待2秒，依次打印2、4、6、8、10，每个数字间隔1秒。

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