ldbar.js 本身不内置 pause/continue 方法，但可通过手动控制计时器（如 setinterval）配合 set() 方法模拟暂停/继续行为，本文详解实现步骤、完整示例及关键注意事项。
ldbar.js 本身不内置 pause/continue 方法，但可通过手动控制计时器（如 setinterval）配合 set() 方法模拟暂停/继续行为，本文详解实现步骤、完整示例及关键注意事项。
ldBar.js 是一个轻量级、基于 SVG 的进度条库（loading.io/progress），其核心设计为状态驱动而非动画驱动——即 bar.set(value) 立即更新进度值并触发动画过渡，但不提供原生的播放控制接口（如 pause/resume）。因此，要实现“暂停/继续”效果，需绕过自动动画，转而自主管理进度值的递增逻辑，再通过 set() 主动刷新。
dmap-jsapi-skill
下载
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
✅ 实现原理
- 使用
setInterval模拟“播放中”的进度递增； - 用变量（如
currentValue）跟踪当前进度； - 点击“暂停”时调用
clearInterval(timer)停止计时器； - 点击“继续”时重新启动
setInterval，从当前值继续累加； - 所有视觉更新均通过
bar.set(currentValue)触发（ldBar 会自动执行平滑过渡动画）。
? 完整可运行示例
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/ldbar@1.2.0/dist/ldbar.min.js"></script>
</head>
<body>
<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>
</body>
</html>⚠️ 关键注意事项
-
不要混用
bar.set()与bar.animate()：ldBar 的animate()方法是单次非可控动画，无法中断；本方案全程使用set()+ 外部计时器，确保完全可控。 -
避免精度丢失：若需高精度（如小数进度），将
step设为0.5并确保currentValue为浮点数，同时注意bar.set()支持小数值（如bar.set(42.7)）。 -
响应式重置：若需“重置后重新开始”，务必手动设置
currentValue = 0并清除旧定时器。 -
内存安全：每次
clearInterval(timer)后将timer = null，防止重复清除或内存泄漏。
通过该方法，你可在不修改 ldBar 源码的前提下，灵活实现暂停、继续、甚至倒退、跳转等高级控制逻辑，兼顾简洁性与扩展性。
