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.
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')
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
<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
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.
How can I fix this?
