如何在LoadingBar.js中实现加载进度的暂停与继续功能？

ldBar本身没有内置的暂停/继续方法，因为set()方法是直接设置进度值，要实现暂停和继续，需要自己通过控制进度的逐步更新过程来实现。具体方案如下：

核心思路 #

1. 不要直接调用bar1.set(100)瞬间完成加载，而是用定时器或动画帧逐步增加进度值，模拟加载过程。
2. 维护变量记录当前进度、定时器/动画帧ID，以及暂停状态，通过这些变量控制加载的启停。

实现代码示例 #

HTML结构（需添加控制按钮）

<div id="bar1" class="ldBar"></div>
<button id="pauseBtn">暂停</button>
<button id="resumeBtn">继续</button>

JavaScript实现（基于setInterval）

// 初始化加载条
var bar1 = new ldBar("#bar1", {});

// 进度控制变量
let currentProgress = 0;
let progressTimer = null;
let isPaused = false;

// 逐步更新进度的函数
function updateProgress() {
  if (currentProgress >= 100) {
    clearInterval(progressTimer);
    return;
  }
  currentProgress += 1; // 每次增加1%，可调整加载速度
  bar1.set(currentProgress);
}

// 启动初始加载
progressTimer = setInterval(updateProgress, 50); // 每50ms更新一次，可调整间隔

// 暂停按钮逻辑
document.getElementById('pauseBtn').addEventListener('click', function() {
  if (!isPaused) {
    clearInterval(progressTimer);
    isPaused = true;
  }
});

// 继续按钮逻辑
document.getElementById('resumeBtn').addEventListener('click', function() {
  if (isPaused && currentProgress < 100) {
    progressTimer = setInterval(updateProgress, 50);
    isPaused = false;
  }
});

更平滑的版本（基于requestAnimationFrame）

如果需要更流畅的动画效果，可使用requestAnimationFrame替代setInterval：

var bar1 = new ldBar("#bar1", {});

let currentProgress = 0;
let animationId = null;
let isPaused = false;

function updateProgress() {
  if (currentProgress >= 100) {
    cancelAnimationFrame(animationId);
    return;
  }
  currentProgress += 0.5; // 每次增加0.5%，更平滑
  bar1.set(currentProgress);
  animationId = requestAnimationFrame(updateProgress);
}

// 启动初始加载
animationId = requestAnimationFrame(updateProgress);

// 暂停逻辑
document.getElementById('pauseBtn').addEventListener('click', function() {
  if (!isPaused) {
    cancelAnimationFrame(animationId);
    isPaused = true;
  }
});

// 继续逻辑
document.getElementById('resumeBtn').addEventListener('click', function() {
  if (isPaused && currentProgress < 100) {
    animationId = requestAnimationFrame(updateProgress);
    isPaused = false;
  }
});

注意事项 #

• 调整currentProgress的增量和定时器/动画帧的间隔，可以控制加载速度。
• 如果加载进度需要和真实任务（如文件上传、数据请求）绑定，只需将updateProgress中的固定增量替换为真实任务的进度值即可。

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