javascript - 长 JavaScript 函数末尾的 CSS 元素更新

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

唯一更新元素的是 Completed，但这会在函数完成后 20 秒后发生。

如何在循环中更新元素？

Answer 1

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

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

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