使用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调用中切换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>