如何让Bootstrap 3进度条每隔5/10分钟自动更新数据？

我用Bootstrap 3创建了几个进度条，目前每次刷新页面会生成随机的进度结果。现在希望不用刷新页面，让这些进度数据每隔5或10分钟自动更新一次，基于现有代码该怎么修改？

原有代码 #

HTML代码 #

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="col-md-5">
  <p>Progress bar1</p>
  <div class="progress progress-striped active">
    <div class="progress-bar"></div>
  </div>
  <p>Progress bar2</p>
  <div class="progress progress-striped active">
    <div class="progress-bar"></div>
  </div>
  <p>Progress bar3</p>
  <div class="progress progress-striped active">
    <div class="progress-bar"></div>
  </div>
</div>

JavaScript代码 #

$( document ).ready(function() {
    $(".progress-bar").each(function (index ) {
          var percent = Math.floor((Math.random() * 37) + 60);
            $(this).html(percent+"%");
            $(this).animate({width: percent+"%"}, 2500);
            if (percent<79){
              $(this).addClass('progress-bar-danger');
            } else if(parseInt(percent)<89){
              $(this).addClass('progress-bar-warning');
            } else{
              $(this).addClass('progress-bar-success');
            }
    })
});    

修改方案 #

核心思路是把进度条的更新逻辑封装成独立函数，再用setInterval定时触发这个函数，同时每次更新前要重置进度条的样式和状态，避免样式叠加。

修改后的JavaScript代码 #

$(document).ready(function() {
    // 封装进度条更新逻辑为独立函数
    function updateProgressBars() {
        $(".progress-bar").each(function(index) {
            // 重置之前的样式类，避免叠加
            $(this).removeClass('progress-bar-danger progress-bar-warning progress-bar-success');
            // 重新生成随机百分比
            var percent = Math.floor((Math.random() * 37) + 60);
            // 更新进度文本和动画
            $(this).html(percent + "%");
            $(this).animate({width: percent + "%"}, 2500);
            // 根据百分比添加对应样式类
            if (percent < 79) {
                $(this).addClass('progress-bar-danger');
            } else if (percent < 89) {
                $(this).addClass('progress-bar-warning');
            } else {
                $(this).addClass('progress-bar-success');
            }
        });
    }

    // 页面加载完成后先执行一次，初始化进度条
    updateProgressBars();

    // 设置定时更新，5分钟（300000毫秒）或10分钟（600000毫秒）可自行调整
    // 下面示例为5分钟更新一次
    setInterval(updateProgressBars, 5 * 60 * 1000);
});

关键说明 #

• 把更新逻辑抽成函数updateProgressBars()，方便重复调用
• 每次更新前用removeClass清除之前的样式类，防止多个状态类叠加导致样式异常
• 页面初始化时先调用一次函数，保证页面加载就有进度显示
• setInterval的第二个参数是定时间隔，单位为毫秒：
  • 5分钟 = 5 * 60 * 1000 = 300000
  • 10分钟 = 10 * 60 * 1000 = 600000
    根据需求替换即可

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