Javascript进度条无法正确加载_Javascript_Jquery_Progress Bar_Loading

Javascript进度条无法正确加载

javascript jquery

Javascript进度条无法正确加载,javascript,jquery,progress-bar,loading,Javascript,Jquery,Progress Bar,Loading,我正在开发一个简单的jquery加载栏，可以将金额发布到其中。我的问题是，即使在javascript中设置了settimeout，它似乎也只能跳到最后一个结果测试脚本包括3个按钮，它们工作得很好，但是我需要能够从底部的内联代码调用该函数。这将似乎跳到最后一个结果75%，而没有显示25%，并等待3秒，因为我希望 <!DOCTYPE html> <html> <style> #Progress { width: 100%; background-colo

我正在开发一个简单的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>


#进展{
宽度：100%；
背景色：#ddd；
}
#酒吧{
宽度：1%；
高度：30px；
背景色：#4CAF50；
}
进度条


实际脚本中不需要测试条按钮

测试条50%

测试条75%

测试条100%

功能移动（金额）{
var elem=document.getElementById（“Bar”）；
elem.style.width=金额+'%'；
}
//我需要用于脚本的内联调用。当加载dispite超时时，它们似乎跳转到最后一个。
setTimeout（函数（）{
动议（25）；
}, 3000);
setTimeout（函数（）{
移动（75）；
}, 3000);

目前，两个

setTimeout

调用并行运行，因此在完成后，您只能看到75%的结果（即使出现了25%的结果，但不再可见）

您可以嵌套

setTimeout

调用，以便它们按顺序进行操作。请参见下面的代码段：

功能移动（金额）{
var elem=document.getElementById（“Bar”）；
elem.style.width=金额+'%'；
}
//嵌套setTimeout调用，以便它们按顺序触发
setTimeout（函数（）{
动议（25）；
setTimeout（函数（）{
移动（75）；
}, 3000);
}, 3000);
#进度{
宽度：100%；
背景色：#ddd；
}
#酒吧{
宽度：1%；
高度：30px；
背景色：#4CAF50；
}


实际脚本中不需要测试条按钮

测试条50%

测试条75%

测试条100%
感谢您花时间回复，这会更好。然而，有一个问题是，我想给它增加另一个价值。我会这样做吗？setTimeout（函数（）{move（50）；setTimeout（函数（）{move（75）；}，3000）；setTimeout（函数（）{move（100）；}，3000）；}，3000）；因为它似乎只需要2个最大即使嵌套。嗨-我更新了关于如何显示一个可变数量的进度点的问题的答案。