javascript - jQuery の $.ajax を使用して Bootstrap プログレス バーを非同期に更新する

Question

ローカル ネットワーク上の IP をループして、何かあるかどうかを確認するスクリプトがあります。反復ごとに、AJAX 要求を送信して、cURL を使用して HTTP ステータス コードを取得します。これが Javascript に返されます。進行状況バーの位置を計算する関数を既に作成していますが、スクリプト全体の実行が終了したときにのみ進行状況バーを更新します。

これが私がこれまでに持っているものです（私は199.235.130.22にいて、「200」を返すため、この例では0-23のみを使用しています）

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% のように) を現在の反復で割った値に更新することです。正しい計算ではないかもしれませんが、要点は、すべての反復が完了した後にのみ更新され、実行中にページがフリーズするということです。

どうすればこれを修正できますか?