Javascript 使用 jQuery 的 $.ajax 异步更新 Bootstrap 进度条
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13973781/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Asynchronously updating a Bootstrap progress bar with jQuery's $.ajax
提问by Scott
I have a script that loops through IPs on my local network, checking if anything is there. Every iteration, I submit an AJAX request to get the HTTP status code using cURL, which is returned to my Javascript. I already have built functions to calculate where the progress bar should be, however it only updates the progress bar when the entire script is finished executing.
我有一个脚本可以循环访问本地网络上的 IP，检查是否有任何内容。每次迭代，我提交一个 AJAX 请求以使用 cURL 获取 HTTP 状态代码，该代码返回给我的 Javascript。我已经构建了计算进度条应该在哪里的函数，但是它只在整个脚本执行完成后更新进度条。
Here's what I have so far (I'm only using 0-23 in this example because I'm on 199.235.130.22 and I return '200')
这是我到目前为止所拥有的（我在这个例子中只使用 0-23，因为我在 199.235.130.22 上，我返回 '200'）
function updateProgress(percentage){
document.getElementById('progressBar').style.width = percentage+'%';
$('#progressText').html(percentage+'%');
}
for(host = 0; host <= 23; host++){
ipToCheck = network_addr+'130.'+host;
updateProgress(100/host);
$.ajax({
type: 'GET',
url: 'js/scanhelper.php',
data: {
ip: ipToCheck
}
}).done(function(msg) {
updateProgress(100/host);
if(msg!=0){
logSuccess(ipToCheck);
}
});
pausecomp(200); //Just a sleep function to simulate actual processing
}
My Bootstrap HTML is simply
我的 Bootstrap HTML 很简单
<div class="progress progress-striped active" style="height:44px;">
<div id="progressBar" class="bar" style="width:1%;"></div>
</div>
And, if it matters, my cURL PHP script is here: http://pastebin.com/JRZckdVb
而且，如果重要的话，我的 cURL PHP 脚本在这里：http: //pastebin.com/JRZckdVb
What this should do is, on every iteration, update the progress bar's width to 100 (as in 100%) divided by the current iteration. It may not be the correct math, but the point is it's only updating after all iterations are complete, freezing the page while it's running.
这应该做的是，在每次迭代中，将进度条的宽度更新为 100（如 100%）除以当前迭代。这可能不是正确的数学计算，但关键是它只在所有迭代完成后更新，在页面运行时冻结页面。
How can I fix this?
我怎样才能解决这个问题？
回答by zer0bit
aren't you dividing by zero here when host = 0 in the for loop?
当 for 循环中的 host = 0 时，你不是在这里除以零吗？
updateProgress(100/host);
you can use a variable hosts to keep track of the number of hosts you have.Then the progress will be as below.
您可以使用变量 hosts 来跟踪您拥有的主机数量。然后进度如下。
var hosts = 23;// total number of hosts
updateProgress((host/hosts)*100);
The other thing is the ajax you're firing is asynchronous, so what's happening is it fires and doesn't wait for the results. You can either "scan" each host serially one at a time updating the progress bar or scan all of them simultaneously having the progress bar update as the asynch results come back. Can you specify which behavior you're trying to achieve?
另一件事是您触发的 ajax 是异步的，所以发生的事情是它触发而不等待结果。您可以一次“扫描”每个主机以更新进度条，也可以同时扫描所有主机，并在异步结果返回时更新进度条。你能指定你想要实现的行为吗？
[UPDATE] toggle async flag in the ajax call below for what you want.
[更新] 在下面的 ajax 调用中根据您的需要切换异步标志。
function updateProgress(percentage){
if(percentage > 100) percentage = 100;
$('#progressBar').css('width', percentage+'%');
$('#progressBar').html(percentage+'%');
}
var hosts = 23;
var hostsDone = 0;
for(host = 0; host <= hosts; host++){
ipToCheck = network_addr+'130.'+host;
$.ajax({
type: 'GET',
url: 'js/scanhelper.php',
async:true,
data: {
ip: ipToCheck
}
}).done(function(msg) {
hostsDone++;
updateProgress((hostsDone/hosts)*100);
if(msg!=0){
logSuccess(ipToCheck);
}
});
}
if you're looking for visuals you should set the height of '#progressBar' to something non-zero and maybe background green.
如果您正在寻找视觉效果，您应该将“#progressBar”的高度设置为非零值，并且背景可能是绿色。
<div class="progress progress-striped active" style="height:44px;">
<div id="progressBar" class="bar" style="height:44px;width:1%;background-color:green"></div>
</div>
