如何在 ldBar.js 中实现进度条的暂停与继续功能-js教程-PHP中文网

如何在 ldBar.js 中实现进度条的暂停与继续功能

ldbar.js 本身不内置 pause/continue 方法，但可通过手动控制计时器（如 setinterval）配合 set() 方法模拟暂停/继续行为，本文详解实现步骤、完整示例及关键注意事项。

ldbar.js 本身不内置 pause/continue 方法，但可通过手动控制计时器（如 setinterval）配合 set() 方法模拟暂停/继续行为，本文详解实现步骤、完整示例及关键注意事项。

ldBar.js 是一个轻量级、基于 SVG 的进度条库（loading.io/progress），其核心设计为状态驱动而非动画驱动——即 bar.set(value) 立即更新进度值并触发动画过渡，但不提供原生的播放控制接口（如 pause/resume）。因此，要实现“暂停/继续”效果，需绕过自动动画，转而自主管理进度值的递增逻辑，再通过 set() 主动刷新。

✅ 实现原理

使用 setInterval 模拟“播放中”的进度递增；
用变量（如 currentValue）跟踪当前进度；
点击“暂停”时调用 clearInterval(timer) 停止计时器；
点击“继续”时重新启动 setInterval，从当前值继续累加；
所有视觉更新均通过 bar.set(currentValue) 触发（ldBar 会自动执行平滑过渡动画）。

? 完整可运行示例



  <script src="https://cdn.jsdelivr.net/npm/ldbar@1.2.0/dist/ldbar.min.js"></script><div id="bar1" data-value="0" style="width: 300px; height: 24px;"></div>
  <br><button id="btnPause">⏸ Pause</button>
  <button id="btnResume">▶ Resume</button>

  <script>
    const bar = new ldBar("#bar1", {
      "stroke": "#4CAF50",
      "stroke-width": 6,
      "fill": "#f0f0f0",
      "duration": 300 // 过渡动画时长（毫秒）
    });

    let currentValue = 0;
    let timer = null;
    const step = 1; // 每次递增步长（0–100）
    const intervalMs = 50; // 每50ms更新一次

    // 启动进度
    function startProgress() {
      if (timer) return; // 防止重复启动
      timer = setInterval(() => {
        currentValue += step;
        if (currentValue >= 100) {
          currentValue = 100;
          clearInterval(timer);
          timer = null;
        }
        bar.set(currentValue);
      }, intervalMs);
    }

    // 暂停进度
    function pauseProgress() {
      if (timer) {
        clearInterval(timer);
        timer = null;
      }
    }

    // 继续进度（等价于重新启动，因已保存 currentValue）
    function resumeProgress() {
      if (!timer && currentValue < 100) {
        startProgress();
      }
    }

    // 绑定按钮事件
    document.getElementById("btnPause").onclick = pauseProgress;
    document.getElementById("btnResume").onclick = resumeProgress;

    // 初始启动
    startProgress();
  </script>

⚠️ 关键注意事项

不要混用 bar.set() 与 bar.animate()：ldBar 的 animate() 方法是单次非可控动画，无法中断；本方案全程使用 set() + 外部计时器，确保完全可控。
避免精度丢失：若需高精度（如小数进度），将 step 设为 0.5 并确保 currentValue 为浮点数，同时注意 bar.set() 支持小数值（如 bar.set(42.7)）。
响应式重置：若需“重置后重新开始”，务必手动设置 currentValue = 0 并清除旧定时器。
内存安全：每次 clearInterval(timer) 后将 timer = null，防止重复清除或内存泄漏。