如何用setInterval实现jQuery进度条每30秒周期性重复动画？

• 先封装独立的进度条动画函数，每次执行前重置进度条状态，避免之前的动画残留导致混乱：

function progressBarAnimate() {
  // 重置进度条到初始状态（宽度为0）
  $('#progressBar').width(0);
  // 执行30秒的进度条填充动画，线性速度保证匀速
  $('#progressBar').animate({
    width: '100%'
  }, 30000, 'linear');
}

• 页面加载完成后，先执行一次动画，再用setInterval每30秒重复触发：

$(document).ready(function() {
  // 首次加载直接启动动画
  progressBarAnimate();
  // 每30秒调用一次动画函数
  setInterval(progressBarAnimate, 30000);
});

• 配套的基础HTML结构示例：

<!-- 进度条容器 -->
<div style="width: 500px; height: 20px; background-color: #eee; border-radius: 10px;">
  <!-- 动态填充的进度条 -->
  <div id="progressBar" style="height: 100%; background-color: #4CAF50; width: 0; border-radius: 10px;"></div>
</div>

• 如果你之前用setInterval没达到预期，大概率是没正确重置进度条状态——上一次动画还没结束或进度条没归零就触发了下一次，导致进度条状态混乱。上面的代码每次执行前都会强制重置宽度，就能解决这个问题。

• 要是你需要严格保证上一次动画完全结束后再开启下一轮，也可以用递归setTimeout实现：

function progressBarLoop() {
  $('#progressBar').width(0).animate({
    width: '100%'
  }, 30000, 'linear', function() {
    // 当前动画完成后，立即启动下一轮
    setTimeout(progressBarLoop, 0);
  });
}

$(document).ready(function() {
  progressBarLoop();
});

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