Question

我有一个脚本循环遍历本地网络上的IP，检查是否有任何内容。每次迭代，我都会提交一个AJAX请求来使用cURL获取HTTP状态代码，然后返回到我的Javascript。我已经构建了用于计算进度条应该位置的函数，但它只在整个脚本执行完毕后才更新进度条。

这是我到目前为止所得到的（在这个例子中我只使用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
}

我的Bootstrap HTML只是

<div class="progress progress-striped active" style="height:44px;">
    <div id="progressBar" class="bar" style="width:1%;"></div>
</div>

而且，如果重要，我的cURL PHP脚本就在这里：http://pastebin.com/JRZckdVb

这应该做的是，在每次迭代时，将进度条的宽度更新为100（如100％）除以当前迭代。它可能不是正确的数学，但重点是它只在所有迭代完成后才更新，在页面运行时冻结页面。

我该如何解决这个问题？

Answer 1

当for循环中的host = 0时，

不是你除零吗？

updateProgress(100/host);

您可以使用变量主机来跟踪您拥有的主机数量。然后进度如下。

var hosts = 23;// total number of hosts
updateProgress((host/hosts)*100);

另一件事是你正在解雇的ajax是异步的，所以发生的事情是它会触发并且不会等待结果。您可以一次一个地“扫描”每个主机，更新进度条，或者在异步结果返回时同时扫描所有主机并更新进度条。你能指定一下你想要达到的行为吗？

[UPDATE] 在下面的ajax调用中切换async标志以获得所需的内容。

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

如果你正在寻找视觉效果，你应该将'#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>

Answer 2

来自 @zerObit 的答案只有通行的 2/3！您还必须设置 aria-valuenow。

在某些情况下，进度条会被隐藏。您可以通过以下方式执行此操作：

$('#progressBar').attr('aria-valuenow', percentage);

使用jQuery的$ .ajax异步更新Bootstrap进度条

2 个答案: