Question

我正在运行一个js函数，该函数使用ajax查询ldap服务器以检索多个用户信息并输入到mysql数据库。这是通过每次循环带有不同参数的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"; }

元素更新的唯一内容是已完成，但一旦函数完成，这将在20秒后发生。如何在循环周期中更新元素？

感谢

Answer 1

这里的问题是你正在快速循环循环并发出10个异步请求。每次进行循环时，都会使用progress_bar设置progress。由于回调未从服务器触发或返回，因此progress始终等于1。要解决此问题，您需要输入：

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

执行onreadystatechange后的progress++回调内部。这可确保在每个异步请求返回服务器后，您更新progress_bar。

长JavaScript函数结束时CSS元素更新

1 个答案: