Asynchron aktualisieren eines Bootstrap-Statusanzeige mit jQuery $.ajax

Ich habe ein Skript durchläuft, IPs auf meinem lokalen Netzwerk prüfen, ob alles da ist. Jede iteration, ich behaupte, dass ein AJAX-request get die HTTP-status-code mit cURL, die ist wieder in meinem Javascript. Ich habe bereits integrierten Funktionen zu berechnen, in dem der progress-bar sein sollte, aber es nur den Fortschrittsbalken aktualisiert, wenn das gesamte Skript ist beendet.

Hier ist, was ich habe, so weit (ich bin nur mit 0-23 in diesem Beispiel, weil ich bin auf 199.235.130.22 und ich zurück, '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
}

Meine Bootstrap HTML ist einfach

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

Und, wenn es darauf ankommt, meine cURL PHP-Skript ist hier: http://pastebin.com/JRZckdVb

Was dieser tun sollten, ist, bei jeder iteration, aktualisieren Sie die Fortschritt-bar Breite bis 100 (als 100%) geteilt durch den aktuellen iteration. Es kann nicht sein, die korrekte Mathe, aber der Punkt ist, es ist nur aktualisieren, nachdem alle Iterationen abgeschlossen sind, einfrieren der Seite, während es läuft.

Wie kann ich dieses Problem beheben?

Weil die for-Schleife blockiert. Und was sleep-Funktion, die Sie tun, ist wahrscheinlich auch zu blockieren.
Die Blockierung? Wie bekomme ich es un-block?
Tun nicht verwenden Sie eine for - /while-Schleife.
Leider klingen unwissend (ich bin), aber ich brauche eine Art Schleife ausführen, um das Skript für die Werte 0-23 (in diesem Fall). Läuft prozedural wäre eine MENGE von wiederholten code, es sei denn, es gibt einen anderen Weg, es zu tun

InformationsquelleAutor Scott | 2012-12-20

  1. 8

    sind Sie nicht auch der Division durch null hier, wenn host = 0 in der for-Schleife?

    updateProgress(100/host);

    können Sie eine variable hosts zu verfolgen die Anzahl der hosts, die Sie haben.Dann wird der Fortschritt als unten.

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

    Die andere Sache ist die ajax-Sie sind Brand ist asynchron, was passiert ist, es feuert und nicht auf die Ergebnisse zu warten. Sie können entweder "scan" jeder host Seriell ein zu einer Zeit mit dem aktualisieren der Statusanzeige oder Scannen Sie Sie gleichzeitig mit den Fortschrittsbalken zu aktualisieren, wie die asynch Ergebnisse kommen zurück. Können Sie angeben, welches Verhalten Sie versuchen zu erreichen?

    [UPDATE]
    toggle async-flag in der ajax-Aufruf unten für das, was Sie wollen.

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

    wenn Sie für die visuals sollten Sie die Höhe von '#progressBar", um etwas nicht-null, und vielleicht der hintergrund grün.

    <div class="progress progress-striped active" style="height:44px;">
    <div id="progressBar" class="bar" style="height:44px;width:1%;background-color:green"></div>
</div>
    Danke!!! Ich hätte es gern Scannen async, da es eigentlich egal ist, in welcher Reihenfolge die Ergebnisse eingegangen sind.
    aktualisiert mit code. wechseln Sie einfach die async-flag 🙂
    Ich habe eine ähnliche situation, ich aktualisiert die Statusanzeige, die als pro der Fall, wenn meine Dateien im backend bereit sind, so geschieht es, dass die Anzahl der ajax-Anfragen, die können gehen bis zu 200 oder mehr, abhängig von der Größe und Anzahl der Dateien gearbeitet wird, im backend. Solche großen Anfragen, pro Benutzer, haben mich besorgt. Denkst du das ist ok oder gibt es eine andere Lösung

    InformationsquelleAutor zer0bit

Schreibe einen Kommentar