0

我正在运行一个 js 函数，它使用 ajax 来查询 ldap 服务器以检索多个用户信息并输入到 mysql db。这是通过每次循环使用不同参数的 ldap 请求来完成的。

因为 ldap 服务器响应缓慢，所以我在进度条中添加，每次查询完成时，都会触发对进度条的更新。问题是进度条只在整个函数完成后更新一次，即使 css 更新发生在循环开始之前。

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 回答