多元素进度条实现问题：点击按钮完成进度条及循环执行代码

核心问题分析 #

• 函数调用错误：你在setInterval里直接执行progressoPositivo(linhaProgresso)，这会立刻运行函数并把返回值（undefined）传给定时器，导致定时器无法重复执行，得传函数引用才行。
• 全局变量冲突：所有进度条共用同一个width变量，会导致它们同步变化，每个进度条得有自己独立的进度值。
• 缺少按钮触发逻辑：没给按钮绑定点击事件，没法手动触发进度条动作。
• 定时器未清理：进度条完成后定时器还在后台跑，浪费性能。

修复后的完整代码（带步进动画） #

<!-- HTML：添加触发按钮和进度条 -->
<button id="startBtn">执行进度条</button>
<div class="progress-group">
  <div class="linha"></div>
  <div class="linha"></div>
  <div class="linha"></div>
</div>

<style>
.linha {
  width: 0%;
  height: 20px;
  background: #4CAF50;
  margin: 6px 0;
}
</style>

const startBtn = document.getElementById('startBtn');
const linhasProgresso = document.querySelectorAll('.linha');
const controle = 2; // 示例：前2个进度条填充，其余清空

// 给每个进度条存独立的进度状态和定时器ID
const progressData = Array.from(linhasProgresso).map(() => ({
  currentWidth: 0,
  timer: null
}));

startBtn.addEventListener('click', () => {
  // 先清掉之前的定时器，防止重复触发
  progressData.forEach(item => {
    if (item.timer) clearInterval(item.timer);
  });

  linhasProgresso.forEach((bar, index) => {
    const data = progressData[index];
    if (index < controle) {
      // 正向填充到100%
      data.timer = setInterval(() => {
        if (data.currentWidth < 100) {
          data.currentWidth++;
          bar.style.width = `${data.currentWidth}%`;
        } else {
          clearInterval(data.timer); // 到目标就停
        }
      }, 10);
    } else {
      // 反向清空到0%
      data.timer = setInterval(() => {
        if (data.currentWidth > 0) {
          data.currentWidth--;
          bar.style.width = `${data.currentWidth}%`;
        } else {
          clearInterval(data.timer); // 到目标就停
        }
      }, 10);
    }
  });
});

快速实现“点击一次直接到100%”（无动画） #

如果不需要步进动画，直接设置宽度就行，代码更简单：

startBtn.addEventListener('click', () => {
  linhasProgresso.forEach((bar, index) => {
    bar.style.width = index < controle ? '100%' : '0%';
  });
});

关键修复点说明 #

• 按钮触发：给按钮绑定click事件，点击才启动进度条逻辑，解决手动触发需求。
• 独立状态管理：用progressData数组存每个进度条的宽度和定时器，避免全局变量冲突，确保每个进度条独立变化。
• 定时器正确使用：用箭头函数包裹进度逻辑，让定时器能重复执行；进度达到目标后立刻清理定时器，避免无效循环。
• 循环终止条件：每个定时器内部判断当前进度是否满足目标值，满足就停止，实现“循环到指定条件”的要求。

内容的提问来源于stack exchange，提问作者Azure.736