如何等待 1 个 ajax 调用结束以在循环中进行另一个 ajax 调用？答案

【问题标题】：how to wait for 1 ajax call to end for making another ajax call in loop?如何等待 1 个 ajax 调用结束以在循环中进行另一个 ajax 调用？
【发布时间】：2011-08-25 14:09:02
【问题描述】：

我在一个循环内调用一个函数，该函数进行 ajax 调用。在拨打另一个电话之前，我需要等待 1 个 ajax 调用结束。代码就像-

function chkAll(field, markr) {
    var string = "document.forms[0].pCheckBox" + markr + ".checked";
    var temp = eval(string);
    if (temp) {
        if (field.length > 1) {
            for (i = 0; i < field.length; i++) {
                field[i].checked = true;
                decide(field[i].id, field[i].value);
            }
        }
        else {
            field.checked = true;
            decide(field.id, field.value);
        }
    }
}

进行 ajax 调用的函数如下：

function decide(code, dataString) {
    if (document.getElementById(code).checked) {
        var url = "../PRODUCT/PCProcess_Ajax.jsp?CIMS_CSRFTOKEN=" + getTokenFromSessionId();
        if (window.ActiveXObject) {
            httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
        } else if (window.XMLHttpRequest) {
            httpRequest = new XMLHttpRequest();
        }
        httpRequest.open("POST", url, true);
        httpRequest.onreadystatechange = processRequest;
        httpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        varparameters = "pScreenId=ClmReports&pEventCode=NFACREATE&pDataString=" + 
            dataString + "&pSelectName=" + code;
        httpRequest.send(parameters);
    } else {
        var url = "../PRODUCT/PCProcess_Ajax.jsp?CIMS_CSRFTOKEN=" + getTokenFromSessionId();
        if (window.ActiveXObject) {
            httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
        }
        else if (window.XMLHttpRequest) {
            httpRequest = new XMLHttpRequest();
        }
        httpRequest.open("POST", url, true);
        httpRequest.onreadystatechange = processRequest;
        httpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        var parameters = "pScreenId=ClmReports&pEventCode=NFADELETE&pDataString=" + dataString;
        httpRequest.send(parameters);
    }
}

在processRequest()中我只是存储httpRequest.responseText并使用它。我想确保在前一个1完成后调用一个decide()。

对此有何看法？？

【问题讨论】：

使用jquery，让这个过程变得非常简单
对不起，不能使用 jquery。这是一个现有的产品代码。

标签： javascript ajax

【解决方案1】：

使用排队系统。在某个地方有一个数组，您可以在 url/数据结构（基本上是一个作业队列）上推送一个数组，以及一个在 ajax 请求未完成时标记的 var。将待办事项数据推送到数组后，调用一个函数 (doNextAjax()?) 检查标志的状态，如果没有未完成的工作，则启动 ajax 请求。如果有未完成的工作，该函数直接返回。

在ajax调用成功处理函数中，只需调用这个doNextAjax()函数，即可发起下一次ajax调用。

这应该可以让您模拟同步请求，而不会像真正的同步请求那样实际占用浏览器。

好的。一些示例代码。可能行不通，因为我要疯了，但是...

var jobQueue = [];
var ajaxActive = false;

function addToQueue(url, data) {
   jobQueue.push({'url' : url, 'data': data});
   doAjax();
}

function doAjax() {
   if (ajaxActive) { return; } // ajax request still outstanding
   if (jobQueue.length = 0) { return; } // no more work to do
   todo = jobQueue.pop();
   ajaxActive = true;
   $.ajax({
      url: todo.url,
      data: todo.data,
      success: function(returnedata) {
          ... do whatever you need with the returned data ...
          ajaxActive = false;
          doAjax(); // schedule another job, if need be.
      },
      error: function(e) {
          ... handle error ...
          ajaxActive = false;
          doAjax(); // schedule next job, if need be
      }
   });
}

【讨论】：

我认为这行得通......虽然我还没有完全理解......你能输入一个示例代码吗？

【解决方案2】：

你应该重写它，它会让你的逻辑更简单一些。您正在尝试混合搭配同步与异步。如果您必须对每个复选框进行 1 次调用，您应该重写代码以从您的 xmlhttprequest 进行成功/失败回调继续到下一个复选框。由于您有复选框的序号位置，因此您可以继续到成功或失败的下一个序号位置。

说实话，最好的办法是将其更改为一个包含所有数据的 Web 请求。这将使您的应用程序看起来更快，因为它不必等待每个复选框通过整个请求/响应周期。

【讨论】：