使用RxJS实现带延迟的请求分块并行执行的技术咨询

嘿，这个分批控速的AJAX需求我之前做项目时也碰到过，用async/await来实现会特别清晰好维护，我给你拆解思路再上完整代码：

核心思路拆解 #

• 第一步：任务分组：把20个AJAX任务按每5个一组拆分，方便后续按组管控流程
• 第二步：组内串行间隔执行：每组里的任务，每完成一个就等1秒再启动下一个，避免请求扎堆
• 第三步：组间等待缓冲：整组任务全部完成后，等待3秒再启动下一组

完整代码实现 #

// 模拟真实AJAX请求，替换成你项目里的fetch/axios调用即可
const ajaxTask = (taskId) => {
  return new Promise((resolve) => {
    console.log(`启动任务 ${taskId}`);
    // 模拟AJAX请求的随机耗时，贴近真实场景
    setTimeout(() => {
      console.log(`任务 ${taskId} 完成 ✅`);
      resolve(taskId);
    }, Math.random() * 1000);
  });
};

// 通用数组分组工具：把大数组按指定大小拆分成子数组
const splitIntoGroups = (arr, groupSize) => {
  const groups = [];
  for (let i = 0; i < arr.length; i += groupSize) {
    groups.push(arr.slice(i, i + groupSize));
  }
  return groups;
};

// 延迟工具函数：返回一个指定毫秒后resolve的Promise
const wait = (ms) => {
  return new Promise(resolve => setTimeout(resolve, ms));
};

// 主执行函数
const runTaskQueue = async () => {
  // 生成20个任务的队列，用ID代表每个AJAX任务
  const allTasks = Array.from({ length: 20 }, (_, idx) => idx + 1);
  // 按每5个一组拆分
  const taskGroups = splitIntoGroups(allTasks, 5);

  // 遍历每组任务
  for (const group of taskGroups) {
    const groupIndex = taskGroups.indexOf(group) + 1;
    console.log(`\n=== 开始执行第 ${groupIndex} 组任务 ===`);
    
    // 组内串行执行，每个任务间隔1秒
    for (const taskId of group) {
      await ajaxTask(taskId);
      // 组内最后一个任务不需要等待间隔
      if (taskId !== group[group.length - 1]) {
        await wait(1000);
      }
    }

    console.log(`=== 第 ${groupIndex} 组任务全部完成 ===`);
    // 最后一组完成后不需要等待3秒
    if (groupIndex !== taskGroups.length) {
      console.log("等待3秒后启动下一组...");
      await wait(3000);
    }
  }

  console.log("\n🎉 所有任务执行完毕！");
};

// 启动任务队列
runTaskQueue();

代码细节说明 #

1. ajaxTask：模拟真实的AJAX请求，你可以直接把内部逻辑替换成项目里的实际请求代码
2. splitIntoGroups：通用分组工具，后续如果任务数量或每组大小变了，改参数就能适配
3. wait：封装延迟逻辑，避免代码里到处写setTimeout，可读性更强
4. 主流程控制：
   • 外层循环处理每组任务，内层循环处理组内单个任务
   • 组内通过wait(1000)控制任务间隔，组间通过wait(3000)做缓冲
   • 加了判断逻辑，避免最后一组任务完成后多余的等待

这样跑下来完全符合你要的执行节奏：组内每个任务间隔1秒，每组完成后等3秒再启动下一组，完美控制请求频率～

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