JavaScript进度条无法自动循环重置问题求助

你的代码问题在于：当进度达到100%时，你调用了clearTimeout(sim)终止了定时器，但没有触发进度条的重置逻辑，所以进度条只会在页面刷新后运行一次，到100%就停止了。

要实现无限循环，只需要在进度达到100%时不终止定时器，而是将进度值重置为0，继续执行进度更新逻辑即可。同时建议避免使用字符串形式的setTimeout参数，直接传函数引用更安全可靠。

修改后的代码如下：

function start(al) {
  var bar = document.getElementById('progressBar');
  // 进度超过100时重置为0
  if (al > 100) {
    al = 0;
  }
  bar.value = al;
  al++;
  // 使用匿名函数传递参数，替代字符串拼接的方式
  setTimeout(function() {
    start(al);
  }, 30); // 调整间隔为30ms，视觉更平滑且降低性能消耗
}
// 直接启动进度条
start(0);

关键修改说明 #

• 移除了clearTimeout逻辑，改为当进度值超过100时重置为0，实现循环效果
• 将setTimeout的字符串参数改为匿名函数调用，避免字符串解析带来的潜在问题
• 调整定时器间隔为30ms（原1ms过于频繁，可能造成不必要的性能消耗），视觉效果更自然
• 直接调用start(0)启动进度条，无需额外的amountLoaded变量

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