0

ajaxを使用してldapサーバーにクエリを実行し、複数のユーザー情報を取得してmysql dbに入力するjs関数を実行しています。これは、毎回異なるパラメーターを使用して LDAP 要求をループすることによって行われます。

LDAP サーバーの応答が遅いため、進行状況バーに追加しています。クエリが完了するたびに、進行状況バーの更新がトリガーされます。問題は、ループが開始される前に css の更新が行われたとしても、関数全体が完了した後にプログレス バーが 1 回しか更新されないことです。

function findUsers() {
//set Number of users
var noOfUsers = 10;
var progress = 1;

//progress bar div appears as soon as function begins
//this element change doesn't happen till the function has finsihed
document.getElementById('progress_bar').style.visibility = 'visible';


//loop through users
for( counter = 0; counter <= noOfUsers; counter++) 
    {
    //update element with progress
    document.getElementById('progress_bar').innerHTML = progress + " of " + noOfUsers;  

    //start AJAX
    xhrPostUserIDToLDAP =new XMLHttpRequest();
    xhrPostUserIDToLDAP.onreadystatechange=function()
        {
        if (xhrPostUserIDToLDAP.readyState==4 && xhrPostUserIDToLDAP.status==200)
            {   
            //updates progress var so on next loop, the element is updated
            progress++;
            }
        }
    xhrPostEmployees.open("POST","ajax/ldap.php",false);
    xhrPostEmployees.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xhrPostEmployees.send("userID="+userID);     
    }
    //loop has finsihed, update element with complete notification
    document.getElementById('progress_bar').innerHTML = "Completed"; }

要素が更新される唯一のものは Completed ですが、これは関数が完了すると 20 秒後に発生します。ループが循環するときに要素を更新するにはどうすればよいですか?

ありがとう

4

1 に答える 1

1

ここでの問題は、ループをすばやくループし、10 個の非同期リクエストを作成していることです。ループを通過するたびに、 をprogress_bar使用して設定されますprogress。コールバックは起動されていないか、サーバーから返されていないため、progress常に 1 になります。これを修正するには、以下を配置する必要があります。

document.getElementById('progress_bar').innerHTML = progress + " of " + noOfUsers;

onreadystatechange実行後のコールバック内progress++。これにより、各非同期リクエストがサーバーに戻ってきた後、確実に を更新できますprogress_bar。

于 2012-05-17T23:13:40.677 に答える