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

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 是异步的，所以它会触发而不是等待结果。您可以一次更新进度条连续地“扫描”每个主机，或者同时扫描所有主机，让进度条在异步结果返回时更新。您能否具体说明您要实现的行为？

[更新] 在下面的 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);
        }
    });
}

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