javascript函数保持刷新页面

我有一个.net页面，我正在使用bootstrap progress bara来显示这样一个值

 <div class="progress">
<div class="progress-bar progress-bar-striped active" id="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
progress    
</div>

然后我希望用户能够更新进度条的值。我有这样的意见

 <div id="someDiv">
Update progress
</div>

 <br><br>

 <input id="someInput" type="text">
 <input type="button" value="Update" onClick="doStuff()">

<br>    

但是发生了什么，一旦我按下更新按钮，进度条会移动到70%，然后又回到30%，然后是70%，等等。所以它介于2之间，所以我假设

会一次又一次地不断加载

有什么帮助吗

原因

函数将重复调用回调函数，直到停止

由于您多次调用：在

onload（）

和

doStuff（）

中，这两个进程同时运行，并尝试更新相同的进度条，可能使用不同的值

解决方案

如果只需要调用函数一次，请改用

否则，在第二次调用之前，您需要使用取消先前定义的操作

返回以后需要的间隔ID。您需要将间隔ID存储在全局变量中

演示

var区间=null；
函数onload（）{
var value=30；//假设稍后阶段此值将来自数据库
间隔=设置间隔（函数（）{
$（“#进度条”）
.css（“宽度”，值+“%”）
.attr（“aria valuenow”，value）
.文本（值+“%”）；
}, 1000);
};
函数doStuff（）{
var namelement=document.getElementById（“someInput”）；
var theName=namelement.value；
var值=名称；
//如果设置了间隔，请将其清除
如果（间隔！==null）{
间隔时间；
}
间隔=设置间隔（函数（）{
$（“#进度条”）
.css（“宽度”，值+“%”）
.attr（“aria valuenow”，value）
.文本（值+“%”）；
}, 1000);
}
$（文档）.ready（函数（）{
onload（）；
});

更新进度








进步
如果您只想在一段时间后重新加载页面，可以定义元数据标记
每30秒重新加载一次页面

<meta http-equiv="refresh" content="30">


嘿，你能举例说明如何在我的代码中使用ClearInterval吗？我尝试过使用它，但它没有改变行为。@test，添加了演示和一些注释。
  function doStuff() {
        var nameElement = document.getElementById("someInput");
        var theName = nameElement.value;
        var value = theName;
        var interval = setInterval(function () {
            $("#progress-bar")
            .css("width", value + "%")
            .attr("aria-valuenow", value)
            .text(value + "%");
        }, 1000);
    }

<meta http-equiv="refresh" content="30">