在下一次迭代之前等待ajax成功答案

【问题标题】：Waiting ajax success before next iteration在下一次迭代之前等待ajax成功
【发布时间】：2012-10-13 17:49:38
【问题描述】：

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

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

感谢您的建议。

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

【问题讨论】：

你在使用提供promise API的框架吗？ here's an example 基本上按照你的要求做。
@JimSchubert 这并没有真正说明如何对它们进行排队，只是在它们全部完成时如何收到通知。
@JuanMendes 我想我误解了，Dee 只想等待所有响应成功，而不是在前一个请求成功完成后才串行执行每个 ajax 请求。

标签： javascript jquery ajax arrays each

【解决方案1】：

可以这样试试

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

【讨论】：

感谢解答，之前唯一需要增加循环的值：++index

【解决方案2】：

试试这样的。基本上，不是遍历所有元素，而是从数组中取出第一项，然后发出 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
        }
    });
}

【讨论】：

【解决方案3】：

只有在 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] );

【讨论】：

或者，只是：requests.length && sendRequests(requests);
@nekman 当然你可以使用它，但它并不比我所拥有的更清晰，我的代码比你建议的技巧更具语义。 var a = b && b.c 在我看来是可以接受的。他们使用它的方式实际上是我们的样式指南所禁止的，因为（为了代码清晰）你不应该在布尔表达式中产生副作用
我同意你的观点，它更清楚。我只是倾向于喜欢 JS 中的单行代码，只是“因为你可以”:)。无论如何，对实际问题/问题的很好的解决方案！
@nekman one-liners 用于 Perl，一种“只写一次读不读”的语言 ;)

【解决方案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();  
                  }
              });
           }
        },

    }

【讨论】：

你拥有的不是一个类，它只是一个静态对象。
是的，据我所知，一切都是 JavaScript 中的对象
确实如此，但是您可以使用prototype 对象来实现类类行为，这就是JS中通常所说的类。如果您无法创建 object 的多个副本，则它不是一个类。