JavaScript中实现带延迟的数组元素处理与多步骤顺序执行

/**
 * 创建一个延迟指定毫秒数的Promise。
 * @param {number} ms 延迟的毫秒数。
 * @returns {Promise<void>} 一个在指定时间后解决的Promise。
 */
function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

/**
 * 异步迭代数组，并在每次处理元素后引入延迟。
 * @param {Array<any>} arr 要迭代的数组。
 * @param {number} elementDelayMs 每个元素处理后的延迟毫秒数。
 * @param {Function} processFn 对每个元素执行的同步或异步函数。
 */
async function processArrayElementsWithDelay(arr, elementDelayMs, processFn) {
  for (const item of arr) {
    await processFn(item); // 执行对当前元素的处理
    await delay(elementDelayMs); // 在处理下一个元素前等待
  }
}

async function mainExecutionFlow() {
  const stepDelayMs = 2000; // 步骤间的延迟毫秒数
  const elementDelayMs = 1000; // 元素间的延迟毫秒数

  // 第一步
  await firstProcessingStep(elementDelayMs);
  await delay(stepDelayMs); // 等待第一步完成后，再等待2秒

  // 第二步
  await secondProcessingStep();
  await delay(stepDelayMs); // 等待第二步完成后，再等待2秒

  // 第三步
  await thirdProcessingStep(elementDelayMs);

  console.log('所有处理流程已完成！');
}

// 示例的各处理步骤函数，具体实现见下文
async function firstProcessingStep(elementDelay) { /* ... */ }
async function secondProcessingStep() { /* ... */ }
async function thirdProcessingStep(elementDelay) { /* ... */ }

mainExecutionFlow();

// 1. 延迟工具函数
function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

// 原始数组
const initialArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let currentArray = [...initialArray]; // 使用副本，避免直接修改原始数组定义

// 2. 第一阶段：打印所有数字，每个数字打印后延迟1秒
async function firstProcess(arr, elementDelayMs) {
  console.log('\n--- 开始第一阶段：打印所有数字 ---');
  for (const num of arr) {
    console.log(num);
    await delay(elementDelayMs); // 每次打印后等待
  }
  console.log('--- 第一阶段完成 ---');
}

// 3. 第二阶段：移除奇数
async function secondProcess() {
  console.log('\n--- 开始第二阶段：移除奇数 ---');
  // 实际操作：过滤掉奇数，更新 currentArray
  currentArray = currentArray.filter(num => num % 2 === 0);
  console.log('当前数组（移除奇数后）:', currentArray);
  console.log('--- 第二阶段完成 ---');
}

// 4. 第三阶段：打印剩余数字，每个数字打印后延迟1秒
async function thirdProcess(arr, elementDelayMs) {
  console.log('\n--- 开始第三阶段：打印剩余偶数 ---');
  for (const num of arr) {
    console.log(num);
    await delay(elementDelayMs); // 每次打印后等待
  }
  console.log('--- 第三阶段完成 ---');
}

// 5. 主执行流程
async function mainExecutionFlow() {
  const stepDelayMs = 2000; // 步骤间延迟
  const elementDelayMs = 1000; // 元素间延迟

  // 执行第一阶段
  await firstProcess(currentArray, elementDelayMs);
  await delay(stepDelayMs); // 第一阶段完成后，等待2秒

  // 执行第二阶段
  await secondProcess(); // secondProcess会修改 currentArray
  await delay(stepDelayMs); // 第二阶段完成后，等待2秒

  // 执行第三阶段，使用修改后的 currentArray
  await thirdProcess(currentArray, elementDelayMs);

  console.log('\n>>> 所有处理流程已圆满完成！ <<<');
}

// 启动主执行流程
mainExecutionFlow();

--- 开始第一阶段：打印所有数字 ---
1
// 1秒延迟
2
// 1秒延迟
...
10
// 1秒延迟
--- 第一阶段完成 ---
// 2秒延迟

--- 开始第二阶段：移除奇数 ---
当前数组（移除奇数后）: [2, 4, 6, 8, 10]
--- 第二阶段完成 ---
// 2秒延迟

--- 开始第三阶段：打印剩余偶数 ---
2
// 1秒延迟
4
// 1秒延迟
...
10
// 1秒延迟
--- 第三阶段完成 ---

>>> 所有处理流程已圆满完成！ <<<