如何用原生JS+HTML+CSS实现依次运行的多进度条（不使用setTimeout）

实现思路 #

• 复用同一个间隔更新逻辑，无需额外setTimeout
• 单条进度条加载完成后，自动切换到下一条，重启计时器即可
• 所有逻辑均为原生JS实现，无复杂CSS依赖

完整代码 #

HTML部分（和原有结构一致，无需修改） #

<div>
  <label>Bar 1</label>
  <progress class="progressBars" value="0" max = "90"></progress>
  
  <br>
  
  <label>Bar 2</label>
  <progress class="progressBars" value="0" max = "35"></progress>
  
  <br>
  
  <label>Bar 3</label>
  <progress class="progressBars" value="0" max = "35"></progress>
  
  <br>
</div>

CSS部分（和原有样式一致，无需修改） #

progress {
  width: 500px;
}
progress::-webkit-progress-bar{
  background-color: gray;
}
progress::-webkit-progress-value{
  background-color: green;
}

JS部分（修改后的逻辑） #

let currentBarIndex = 0;
let intervalId = null;
const bars = document.getElementsByClassName('progressBars');

// 启动下一个进度条的封装函数
function startNextBar() {
  // 所有进度条都加载完成就终止
  if (currentBarIndex >= bars.length) return;
  // 清除之前的计时器避免冲突
  if (intervalId) clearInterval(intervalId);
  // 启动新的计时器更新当前进度条
  intervalId = setInterval(() => {
    increaseProgress(bars[currentBarIndex]);
  }, 10);
}

function increaseProgress(bar) {
  if (bar.value < bar.max) {
    bar.value++;
  } else {
    // 当前进度条加载完成，清计时器，切换到下一个
    clearInterval(intervalId);
    currentBarIndex++;
    startNextBar();
  }
}

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

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