javascript - 在下一次迭代之前等待ajax成功

Question

我必须对特定数组执行 ajax 请求并等待服务器响应，然后再进行循环中的下一次迭代。

我目前正在同时执行我的迭代。确保成功后如何进行？

感谢您的任何建议。

myArray.each(function(val, index) {
    new Ajax.Request(myUrl + val, {
        onSuccess: function() {
               responseFromServer();
        }
    });
    void(0);
});

Answer 1

只有在 AJAX 请求完成后，您才需要进行下一次迭代。我将使用 jQuery 来展示一个示例；

function sendRequests(requests) {
    var value = requests.shift();
    $.ajax(myUrl + value).done(function(data){
        if (requests.length > 0) {
            sendRequests(requests);
        }
    });    
}

sendRequests( [1,2,3,4] );

Answer 2

可以这样试试

function getItem(url, array, index)
{
   new Ajax.Request(url + array[index])
   {
      onSuccess : function()
      {
        responseFromServer(); //assuming this handles the server response
        if (index < array.length)
           getItem(url, array, ++index);
      }
   }
}

然后只需调用它

getItem(myUrl, myrray, 0);

基本上，您希望回调在数组中的下一个项目上启动下一个 ajaxrequest

Answer 3

尝试这样的事情。基本上，不是遍历所有元素，而是从数组中取出第一项，然后发出 AJAX 请求。然后，当您的请求成功完成时，您调用下一项。

请注意，在此示例中，原始数组已发生突变，在您的情况下可能会也可能不会。

function invokeAll(myArray)
{
    var val = myArray.shift(); //get the next item to be processed
    if (!val)
        return;
    new Ajax.Request(myUrl + val, {
        onSuccess: function() {
               responseFromServer();
               invokeAll(myArray); //got a successful response, start the next one
        }
    });
}

Answer 4

您可以为此作业编写一个类，它的 processNext() 函数将处理数组中的所有项目

var arrayProcessor = {
        values: [],
        process: function(arr) {
           arrayProcessor.values = arr;
           arrayProcessor.processNext();  
        },
        processNext: function(){
            if (arrayProcessor.values.length > 0) {
              new Ajax.Request(myUrl + arrayProcessor.values.shift(), {
                  onSuccess: function() {
                       responseFromServer();
                       arrayProcessor.processNext();  
                  }
              });
           }
        },

    }