进度条的多个顺序递归javascript函数

// 定义任务列表
const tasks = [
  { name: '任务1', duration: 2000 },
  { name: '任务2', duration: 3000 },
  { name: '任务3', duration: 1500 },
  // ...
];

// 定义进度条元素
const progressBar = document.getElementById('progress-bar');

// 递归执行任务
function executeTasks(index) {
  if (index >= tasks.length) {
    // 所有任务执行完毕
    return;
  }

  const task = tasks[index];

  // 更新进度条状态
  const progress = ((index + 1) / tasks.length) * 100;
  progressBar.style.width = `${progress}%`;

  // 执行当前任务
  performTask(task)
    .then(() => {
      // 当前任务执行完毕，递归执行下一个任务
      executeTasks(index + 1);
    })
    .catch((error) => {
      // 处理任务执行错误
      console.error(`任务执行失败：${task.name}`, error);
    });
}

// 执行单个任务
function performTask(task) {
  return new Promise((resolve, reject) => {
    // 模拟耗时操作
    setTimeout(() => {
      console.log(`正在执行任务：${task.name}`);

      // 任务执行成功
      resolve();
    }, task.duration);
  });
}

// 开始执行任务
executeTasks(0);