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

<强>原因

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

由于您多次调用setInterval：onload()和doStuff()两者同时运行并尝试更新相同的进度条，可能使用不同的值。< / p>

<强>解

如果您只需要调用一次该功能，请改用setTimeout。

否则，您需要先使用clearInterval取消先前定义的操作，然后再次致电setInterval。

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

<强>样本

＆＃13;

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

＆＃13;

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

＆＃13;

备注

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

Answer 2

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

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

javascript函数保持刷新页面

2 个答案: