如何实现支持正反向滚动、暂停继续按钮控制的动态进度条？

原有代码存在三个核心问题导致无法扩展控制逻辑：未存储定时器ID无法终止运行、无独立状态变量存储进度/运行状态/滚动方向、边界换向逻辑不完整。修改方案围绕新增状态控制变量、拆分控制函数实现：

• 新增3个全局状态变量存储运行时信息：timerId（保存定时器ID，用于暂停时清除）、isRunning（记录当前是否处于运行状态，避免重复启动定时器）、direction（记录滚动方向，1为正向，-1为反向）
• 把进度值width提取到函数外部，避免每次调用函数重置进度
• 新增边界自动换向逻辑：当进度到0或100时自动翻转方向，实现往复滚动
• 新增独立的控制函数，对应暂停、继续、切换方向的操作

HTML结构 #

<!-- 进度条结构 -->
<div class="progress-container" style="width: 300px; height: 20px; border: 1px solid #ccc;">
  <div class="progress-filling" style="height: 100%; width: 0%; background: #2196F3;"></div>
</div>
<!-- 控制按钮 -->
<button onclick="setDirection(1)">正向滚动</button>
<button onclick="setDirection(-1)">反向滚动</button>
<button onclick="pauseBar()">暂停</button>
<button onclick="resumeBar()">继续</button>

JS逻辑 #

// 全局状态变量
let timerId = null;
let width = 0;
let isRunning = false;
let direction = 1; // 1为正向，-1为反向
const filling = document.querySelector(".progress-filling");

// 进度更新核心函数
function updateBar() {
  if (isRunning) return; // 避免重复启动定时器
  isRunning = true;
  timerId = setInterval(update, 5);
  
  function update() {
    // 边界自动换向
    if (width >= 100) direction = -1;
    if (width <= 0) direction = 1;
    // 按方向更新进度
    width += direction;
    filling.style.width = width + "%";
  }
}

// 暂停控制
function pauseBar() {
  if (!isRunning) return;
  clearInterval(timerId);
  isRunning = false;
}

// 继续控制
function resumeBar() {
  if (isRunning) return;
  updateBar();
}

// 滚动方向设置
function setDirection(val) {
  direction = val;
}

// 页面加载后自动启动进度条（可根据需求调整启动时机）
updateBar();

• 正向/反向切换：通过修改direction变量的正负值实现，不需要重启定时器，修改后实时生效
• 暂停/继续：暂停时直接清除当前定时器并标记运行状态为false，继续时重新启动定时器即可继承之前的进度和方向继续运行
• 自动往复：当进度触达0%或100%边界时自动翻转方向，不需要额外手动控制

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