如何获取每分钟不同的数据

Question

我使用boostrap 3创建了一些进度条，每次刷新页面时都会显示一些不同的结果。下面是我的进度条的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');
}
})
});    

所以，我想让生成的数据每5或10分钟出现一次。不是每个页面都刷新，我如何根据我的脚本做到这一点?谢谢你

小提琴联系

Answer 1

如何使用setInterval?像这样

$( document ).ready(function() {
$(".progress-bar").each(function (index ) {

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


})
});