尝试使用延迟对象和$. time进行多个AJAX调用

Question

因此，根据本教程中关于介质的内容(https://medium.com/coding-design/writing-better-ajax-8ee4a7fb95f#.d7ymg99mp)，我尝试使用延迟数组、ajax请求和jQuery.when方法生成多个ajax请求并从每个请求中获取结果。

这是我正在做的事情的代码

function updateAllGoingButtons(){
    var dataToPass = {};
    var deferreds = [];

    $('.btn-group').find('button').each(function(){
       console.log($(this).attr('id'));
       dataToPass.button = $(this).attr('id');
       var ajax = $.ajax({
          url: '/update-buttons',
          method: 'post',
          data: dataToPass,
          dataType:'json'
       });

       deferreds.push(ajax);

       $.when.apply($, deferreds).then(function(){

       });
    });
}

我对如何使用$.when函数以及在哪里可以访问返回到ajax调用的数据感到困惑。

我尝试插入一个简单的成功选项，但它没有进入回调函数。我该怎么做呢？

Answer 1

你只是在太快的时候调用。在启动所有ajax调用并在数组中得到它们的promise后，在each循环之外执行此操作：

function updateAllGoingButtons(){
    var dataToPass = {};
    var deferreds = [];

    $('.btn-group').find('button').each(function(){
       console.log($(this).attr('id'));
       dataToPass.button = $(this).attr('id');
       var ajax = $.ajax({
          url: '/update-buttons',
          method: 'post',
          data: dataToPass,
          dataType:'json'
       });

       deferreds.push(ajax);

    });

    $.when.apply($, deferreds).then(function(){     // <=== Moved this
                                                    // <===
    });                                             // <===
}

这些ajax调用的结果将作为一系列离散参数提供给函数。每个参数将是一个包含三个条目的数组，对应于通常传递给success函数的三个参数。因为您处理的是数组，所以您可能希望通过参数伪数组访问它们。最好有一个拒绝处理程序（第二个参数是then，或者在jQuery的最新版本中交替使用catch）：

$.when.apply($, deferreds).then(
    function() {
        var n;
        for (n = 0; n < arguments.length; ++n) {
             console.log("Result " + n, arguments[n][0]);
        }
    },
    function() {
        // At least one request failed
    }
);