当多个 ajax 调用完成时答案

【问题标题】：when multiple ajax calls done当多个 ajax 调用完成时
【发布时间】：2013-12-23 08:15:59
【问题描述】：

以下是无法按我想要的顺序运行的场景：

var masterData = {};
var tableNames = ['table1','table2','table3','table4','table5','table6'];
var pullSqlData = function(){
  tableNames.forEach(function(value) {
    if(storage.isEmpty(value)) {
      $.getJSON('http://domain.com?r=appsync/read&id='+value+ "&callback=", function(data){
        masterData[value] = data;
        storage.set(value,data);
      });
    } else {
      masterData[value] = storage.get(value);
    }
  });
};

$.when(pullSqlData()).done(function(){
console.log('all done');
});

四处搜索后，我知道如果我手动执行类似的操作，我可以继续工作

$.when(
$.getJSON('http://domain.com?r=appsync/read&id=table1&callback=', function(data){
        masterData[value] = data;
        storage.set(value,data);
      }),
$.getJSON('http://domain.com?r=appsync/read&id=table2&callback=', function(data){
        masterData[value] = data;
        storage.set(value,data);
      }),
//more calls
).done(function(){
console.log('all done');
});

但是我想知道是否有一种方法可以超越正确的方法

*storage 是一个 HTML5 localStorage jQuery 插件

【问题讨论】：

标签： jquery jquery-deferred .when

【解决方案1】：

既然你是动态请求数，试试

var masterData = {};
var tableNames = ['table1', 'table2', 'table3', 'table4', 'table5', 'table6'];
var pullSqlData = function () {
    var requests = [];
    tableNames.forEach(function (value) {
        if (storage.isEmpty(value)) {
            var xhr = $.getJSON('http://domain.com?r=appsync/read&id=' + value + "&callback=", function (data) {
                masterData[value] = data;
                storage.set(value, data);
            });
            requests.push(xhr)
        } else {
            masterData[value] = storage.get(value);
        }
    });
    return requests;
};

$.when.apply($, pullSqlData()).done(function () {
    console.log('all done');
});

您需要将所有 ajax 请求传递给 $.when()，因此 pullSqlData 必须返回由它创建的 ajax 请求列表。另外 $.when() 不将数组作为参数，因此您需要使用 Function.apply() 将可变数量的参数传递给它

【讨论】：

【解决方案2】：

检查每次成功执行

var masterData = {};
var tableNames = ['table1', 'table2', 'table3', 'table4', 'table5', 'table6'];
var pullSqlData = function () {
    var requests = [];
    tableNames.forEach(function (value) {
        if (storage.isEmpty(value)) {
            var xhr = $.getJSON('http://domain.com?r=appsync/read&id=' + value + "&callback=", function (data) {
                masterData[value] = data;
                storage.set(value, data);
                check_if_all_done();
            });
            requests.push(xhr)
        } else {
            masterData[value] = storage.get(value);
        }
    });
    return requests;
};

function check_if_all_done()
{
   if(masterData.length == tableNames.length ) console.log('done');

}

【讨论】：

【解决方案3】：

这样的事情应该可以按顺序发出请求：

var requests = pullSqlData() //save in array of promises each request as @ArunPJhonny

var first = requests.shift();

        $.each(requests, function (n, p) {
            first.then(function () {
                return p;
            });
        });

        first.done(function () {
            //...done
        });

【讨论】：