Javascript 进度条无法正确加载答案

【问题标题】：Javascript Progess bar wont load correctlyJavascript 进度条无法正确加载
【发布时间】：2017-03-27 02:54:35
【问题描述】：

我正在开发一个可以发布金额的简单 jquery 加载栏。我的问题是，即使在 javascript 中设置了 settimeout，它似乎也只能跳转到最后一个结果。

测试脚本包含 3 个可以完美运行的按钮，但是我需要能够从底部的内联代码调用该函数。这似乎会跳到最后一个结果 75%，而没有显示 25% 并等待 3 秒，就像我希望的那样。

<!DOCTYPE html>
<html>
<style>
#Progress {
  width: 100%;
  background-color: #ddd;
}

#Bar {
  width: 1%;
  height: 30px;
  background-color: #4CAF50;
}
</style>
<body>

<h1>Progress Bar</h1>

<div id="Progress">
  <div id="Bar" style="width:0px;"></div>
</div>

<br>
Buttons for testing bar not needed in actual script<br>
<button onclick="move(50)">Test Bar 50%</button> <br>
<button onclick="move(75)">Test Bar 75%</button> <br>
<button onclick="move(100)">Test Bar 100%</button> <br>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script>
function move(amount) {
  var elem = document.getElementById("Bar");   
  elem.style.width = amount + '%'; 
}
// Inline calls I need to use for my script. These seem to jump to the last one when loaded dispite timeout.
setTimeout(function(){
  move(25);
}, 3000);
setTimeout(function(){
  move(75);
}, 3000);
</script>

</body>
</html>

【问题讨论】：

标签： javascript jquery progress-bar loading

【解决方案1】：

目前，两个 setTimeout 调用并行运行，因此在完成时您只能看到 75% 的结果（即使 25% 的结果发生了，它也不再可见）。

您可以嵌套setTimeout 调用，以便它们按顺序执行。请参阅下面的 sn-p：

function move(amount) {
  var elem = document.getElementById("Bar");
  elem.style.width = amount + '%';
}
// nest the setTimeout calls so they fire sequentially
setTimeout(function() {
  move(25);
  setTimeout(function() {
    move(75);
  }, 3000);
}, 3000);

#Progress {
  width: 100%;
  background-color: #ddd;
}

#Bar {
  width: 1%;
  height: 30px;
  background-color: #4CAF50;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Progress">
  <div id="Bar" style="width:0px;"></div>
</div>

<br> Buttons for testing bar not needed in actual script<br>
<button onclick="move(50)">Test Bar 50%</button> <br>
<button onclick="move(75)">Test Bar 75%</button> <br>
<button onclick="move(100)">Test Bar 100%</button> <br>

更新

如果您有可变数量的进度点要显示，那么您可以使用下面改编自 useful answer 的技术。

function move(amount) {
  var elem = document.getElementById("Bar");
  elem.style.width = amount + '%';
}

// set array of points:
var movements = [10, 20, 30, 50, 75, 99, 100];
var i = -1;

function moveSequence() {
  move(movements[i++]);
  if (i < movements.length) setTimeout(moveSequence, 1000);
}
moveSequence();

#Progress {
  width: 100%;
  background-color: #ddd;
}

#Bar {
  width: 1%;
  height: 30px;
  background-color: #4CAF50;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Progress">
  <div id="Bar" style="width:0px;"></div>
</div>

<br> Buttons for testing bar not needed in actual script<br>
<button onclick="move(50)">Test Bar 50%</button> <br>
<button onclick="move(75)">Test Bar 75%</button> <br>
<button onclick="move(100)">Test Bar 100%</button> <br>

【讨论】：

感谢您抽出宝贵时间回复，这样会好很多。但是有一个问题让我想在其中添加另一个值。我会这样做吗？ setTimeout(function() { move(50); setTimeout(function() { move(75); }, 3000); setTimeout(function() { move(100); }, 3000); }, 3000);因为即使通过嵌套，它似乎也最多只需要 2 个。
嗨 - 我更新了关于如何显示可变数量进度点的进度的问题的答案。