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

Question

我在一个循环内调用一个函数，该函数进行 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 并使用它。我想确保在之后调用一个 decide()上一题完成。

有什么看法吗？？

Answer 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
      }
   });
}