循环中clearInterval后重启setInterval的进度条动画问题

你的代码中，for循环会同步执行三次setInterval调用，导致三个进度条同时开始动画，没有实现“完成一个再启动下一个”的逻辑。以下是两种可行的解决方案：

方案一：递归调用实现依次动画 #

这种方式通过递归函数，在前一个进度条动画完成后自动启动下一个：

const items = document.getElementsByClassName('bar');
let currentIndex = 0;

function animateNextBar() {
  // 所有进度条处理完毕则退出
  if (currentIndex >= items.length) return;

  const currentBar = items[currentIndex];
  let counter = 0;
  const intervalId = setInterval(() => {
    if (counter >= 100) {
      clearInterval(intervalId);
      currentIndex++;
      // 当前进度条完成，启动下一个
      animateNextBar();
    } else {
      counter++;
      currentBar.style.width = `${counter}%`;
    }
  }, 10);
}

// 启动第一个进度条动画
animateNextBar();

方案二：Promise + async/await 实现顺序执行 #

将单个进度条的动画封装为Promise，再通过async/await按顺序执行：

const items = document.getElementsByClassName('bar');

// 封装单个进度条动画为Promise
function animateBar(bar) {
  return new Promise(resolve => {
    let counter = 0;
    const intervalId = setInterval(() => {
      if (counter >= 100) {
        clearInterval(intervalId);
        resolve();
      } else {
        counter++;
        bar.style.width = `${counter}%`;
      }
    }, 10);
  });
}

// 按顺序执行所有进度条动画
async function animateAllBars() {
  for (const bar of items) {
    await animateBar(bar);
  }
}

animateAllBars();

两种方案的核心逻辑都是避免同步启动所有定时器，而是在前一个进度条的动画完成后，再触发下一个的动画流程。

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