javascript函数不断刷新页面

Question

我有一个 .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>

然后，根据预定义的值(来自数据库)，我们将为进度条设置一个值，如下所示

function onload() {

        var value = 30; //assume later stage this value will come from database
        var interval = setInterval(function () {
            $("#progress-bar")
           .css("width", value + "%")
           .attr("aria-valuenow", value)
           .text(value + "%");
        }, 1000);
};

onload();

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

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

 <br><br>

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

<br>    

那么更新进度条值的javascript就是这样

  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);
    }

但是发生了什么，一旦我点击更新按钮，进度条移动到 70%，然后回到 30% 然后 70% 等等。所以它在 2 之间，所以我假设 <script>不断加载。

有什么帮助吗？

Answer 1

CAUSE

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

由于您正在调用 setInterval多次:在 onload() 和 doStuff() 中都同时运行并尝试更新相同的进度条，可能具有不同的值。

SOLUTION

如果您只需要调用该函数一次，请使用 setTimeout反而。

否则你需要使用clearInterval在调用 setInterval 之前取消先前定义的操作第二次。

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

DEMO

var interval = null;

function onload() {

  var value = 30; //assume later stage this value will come from database
  interval = setInterval(function() {
    $("#progress-bar")
      .css("width", value + "%")
      .attr("aria-valuenow", value)
      .text(value + "%");
  }, 1000);
};


function doStuff() {
  var nameElement = document.getElementById("someInput");
  var theName = nameElement.value;
  var value = theName;

  // If interval is set, clear it
  if (interval !== null) {
    clearInterval(interval);
  }

  interval = setInterval(function() {
    $("#progress-bar")
      .css("width", value + "%")
      .attr("aria-valuenow", value)
      .text(value + "%");
  }, 1000);
}

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

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

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

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

<br>
<br>

<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>

NOTES

我认为您不需要 setTimout 或 setInterval，因为重复更新进度条或使用相同的值进行延迟是没有意义的。