8

我有一个脚本可以遍历本地网络上的 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%）除以当前迭代。这可能不是正确的数学，但关键是它只是在所有迭代完成后才更新，在页面运行时冻结页面。

我怎样才能解决这个问题？

4

2 回答 2

10

当for循环中的host = 0时，您不是在这里除以零吗？

updateProgress(100/host);

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

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>
于 2012-12-20T14:09:27.597 回答
0

答案@zerObit只有整个过程的 2/3！您还必须设置aria-valuenow.

在某些情况下，进度条会被隐藏。您可以通过以下方式做到这一点：

$('#progressBar').attr('aria-valuenow', percentage);
于 2020-12-20T18:07:50.390 回答