如何在JavaScript中实现数组元素与流程间的顺序延迟执行

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

/**
 * 异步遍历数组，并在处理每个元素后暂停。
 * @param {Array<any>} arr 要处理的数组。
 * @param {number} elementDelayMs 每个元素处理后的延迟毫秒数。
 */
async function processElementsSequentially(arr, elementDelayMs) {
  for (const item of arr) {
    console.log(item); // 假设这里是处理元素的逻辑，例如打印
    await delay(elementDelayMs); // 等待指定时间
  }
}

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

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

// 逐个元素处理并延迟的函数
async function processElementsSequentially(arr, elementDelayMs) {
  for (const item of arr) {
    console.log(item);
    await delay(elementDelayMs);
  }
}

/**
 * 模拟整个复杂的异步执行流程。
 */
async function mainExecutionFlow() {
  // --- 第一步：打印原始数组元素 ---
  console.log('\n--- 第一步：打印原始数组元素 (每个元素间隔1秒) ---');
  await processElementsSequentially(currentArray, 1000); // 1秒元素延迟
  console.log('第一步完成。');
  await delay(2000); // 2秒流程间延迟

  // --- 第二步：移除奇数 ---
  console.log('\n--- 第二步：移除奇数 (此步骤后延迟2秒) ---');
  currentArray = currentArray.filter(num => num % 2 === 0);
  console.log('数组已更新为:', currentArray);
  console.log('第二步完成。');
  await delay(2000); // 2秒流程间延迟

  // --- 第三步：打印剩余数组元素 ---
  console.log('\n--- 第三步：打印剩余数组元素 (每个元素间隔1秒) ---');
  await processElementsSequentially(currentArray, 1000); // 1秒元素延迟
  console.log('第三步完成。');
}

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

--- 第一步：打印原始数组元素 (每个元素间隔1秒) ---
1
// 1秒延迟
2
// 1秒延迟
3
// ...
10
// 1秒延迟
第一步完成。
// 2秒延迟

--- 第二步：移除奇数 (此步骤后延迟2秒) ---
数组已更新为: [2, 4, 6, 8, 10]
第二步完成。
// 2秒延迟

--- 第三步：打印剩余数组元素 (每个元素间隔1秒) ---
2
// 1秒延迟
4
// 1秒延迟
6
// 1秒延迟
8
// 1秒延迟
10
// 1秒延迟
第三步完成。