JavaScript中实现多阶段异步数组处理与精确延迟控制

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

// 初始数组，后续操作将基于此数组进行修改
let currentArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

/**
 * 第一阶段：遍历并打印数组中的每个数字，每个数字打印后延迟1秒。
 * @param {Array<number>} arr - 当前要处理的数组。
 * @returns {Promise<void>}
 */
async function firstProcess(arr) {
  console.log('--- 开始第一阶段：打印所有数字 ---');
  for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
    await delay(1000); // 元素间1秒延迟
  }
  console.log('--- 第一阶段结束 ---');
}

/**
 * 第二阶段：从数组中移除所有奇数。此操作本身是同步的，但作为异步阶段的一部分。
 * @param {Array<number>} arr - 当前要处理的数组。
 * @returns {Promise<void>}
 */
async function secondProcess(arr) {
  console.log('--- 开始第二阶段：移除奇数 ---');
  // 移除操作本身可以同步完成
  currentArray = arr.filter(num => num % 2 === 0); // 更新全局数组
  console.log('--- 第二阶段结束，奇数已移除 ---');
}

/**
 * 第三阶段：遍历并打印剩余数组中的每个数字，每个数字打印后延迟1秒。
 * @param {Array<number>} arr - 当前要处理的数组。
 * @returns {Promise<void>}
 */
async function thirdProcess(arr) {
  console.log('--- 开始第三阶段：打印剩余数字 ---');
  if (arr.length === 0) {
    console.log('数组为空，无数字可打印。');
    return;
  }
  for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
    await delay(1000); // 元素间1秒延迟
  }
  console.log('--- 第三阶段结束 ---');
}

/**
 * 执行一个处理阶段，并在该阶段完成后引入一个额外的延迟。
 * @param {Function} stepFunction - 要执行的异步阶段函数（例如 firstProcess, secondProcess等）。
 *                                  该函数应接受当前数组作为参数，并返回一个Promise。
 * @param {number} interStepDelay - 阶段完成后的额外延迟毫秒数。
 * @returns {Promise<void>}
 */
async function executeStepWithInterStepDelay(stepFunction, interStepDelay) {
  // 执行阶段函数，并等待其完成
  const stepExecutionPromise = stepFunction(currentArray);

  // 使用 Promise.all 同时等待阶段执行完成和阶段间延迟结束
  // 这确保了在进入下一个 .then() 之前，两个条件都已满足。
  await Promise.all([stepExecutionPromise, delay(interStepDelay)]);
}

// 初始数组，后续操作将基于此数组进行修改
let currentArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

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

/**
 * 第一阶段：遍历并打印数组中的每个数字，每个数字打印后延迟1秒。
 * @param {Array<number>} arr - 当前要处理的数组。
 * @returns {Promise<void>}
 */
async function firstProcess(arr) {
  console.log('--- 开始第一阶段：打印所有数字 ---');
  for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
    await delay(1000); // 元素间1秒延迟
  }
  console.log('--- 第一阶段结束 ---');
}

/**
 * 第二阶段：从数组中移除所有奇数。此操作本身是同步的，但作为异步阶段的一部分。
 * @param {Array<number>} arr - 当前要处理的数组。
 * @returns {Promise<void>}
 */
async function secondProcess(arr) {
  console.log('--- 开始第二阶段：移除奇数 ---');
  // 移除操作本身可以同步完成
  currentArray = arr.filter(num => num % 2 === 0); // 更新全局数组
  console.log('--- 第二阶段结束，奇数已移除 ---');
}

/**
 * 第三阶段：遍历并打印剩余数组中的每个数字，每个数字打印后延迟1秒。
 * @param {Array<number>} arr - 当前要处理的数组。
 * @returns {Promise<void>}
 */
async function thirdProcess(arr) {
  console.log('--- 开始第三阶段：打印剩余数字 ---');
  if (arr.length === 0) {
    console.log('数组为空，无数字可打印。');
    return;
  }
  for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
    await delay(1000); // 元素间1秒延迟
  }
  console.log('--- 第三阶段结束 ---');
}

/**
 * 执行一个处理阶段，并在该阶段完成后引入一个额外的延迟。
 * @param {Function} stepFunction - 要执行的异步阶段函数。
 * @param {number} interStepDelay - 阶段完成后的额外延迟毫秒数。
 * @returns {Promise<void>}
 */
async function executeStepWithInterStepDelay(stepFunction, interStepDelay) {
  const stepExecutionPromise = stepFunction(currentArray);
  await Promise.all([stepExecutionPromise, delay(interStepDelay)]);
}

// 主执行流程
(async () => {
  try {
    // 执行第一阶段：打印数字，完成后等待2秒
    await executeStepWithInterStepDelay(firstProcess, 2000);

    // 执行第二阶段：移除奇数，完成后等待2秒
    await executeStepWithInterStepDelay(secondProcess, 2000);

    // 执行第三阶段：打印剩余数字，完成后不额外等待（最后一个阶段）
    await executeStepWithInterStepDelay(thirdProcess, 0); // 最后一个阶段可以设为0或不传入延迟

    console.log('所有阶段执行完毕！最终数组:', currentArray);
  } catch (error) {
    console.error('执行过程中发生错误:', error);
  }
})();