通过多个AJAX请求填充数组，然后将数组传递给另一个函数

Question

（我的解决方案如下）

我有几个带有.canvas-background类的HTML元素，其信息存储在数据库中。 我想获取每个元素的信息并通过JavaScript处理它。 但是我不能以某种方式将AJAX请求的响应传递给另一个函数。 这是我尝试过的：

function initTabs() {
    var tabs = loadTabInformation();
    console.log(tabs); // (1)
    // do something else
}

function loadTabInformation() {
    var requests = new Array();
    var tabs = new Object();
    var counter = 0;
    $(".canvas-background").each(function () {
        var tabNumber = $(this).data("tab-number");
        var request = $.ajax({
            type: 'POST',
            url: '../db/GetTabInformation.ashx',
            data: String(tabNumber),
            dataType: 'json',
            contentType: 'text/plain; charset-utf-8'
        })
        .done(function (response) {
            tabs[counter++] = response;
        }).fail(function (jqXHR, textStatus, errorThrown) {
            console.log("request error in loadTabInformation()");
            console.log(textStatus);
            console.log(errorThrown);
        });
        requests.push(request);
    });
    $.when.apply($, requests).done(function () {
        console.log(tabs); // (2)
        return tabs;
    });
}

在(1)我undefined ，但在(2)一切似乎都还不错。

解决方案：

多亏了答案和评论中的链接，@ Kim Hoang提供了我的工作。 线索似乎是把done()函数放在了调用函数中，在我的例子中就是initTabs() 。 我弄错的另一件事是尝试执行应该在完成的回调函数之外完成AJAX请求之后执行的逻辑。 它们必须在里面（如果您考虑一下，这是有道理的）。 大量的conosle输出帮助查看了什么函数返回了什么样的对象。

function initTabs() {
    var tabInfoRequest = loadTabInfo();
    tabInfoRequest[0].done(function() {
        var results = (tabInfoRequest[1].length > 1) ? $.map(arguments, function(a) { return a[0]; }) : [arguments[0]];
        for (var i = 0; i < results.length; i++) {
            // do something with results[i]
        }
    });
}

function loadTabInfo() {
    var tabNumbers = new Array();
    $(".canvas-background").each(function () {
        tabNumbers.push($(this).data("tab-number"));
    });
    var requests = $.map(tabNumbers, function (current) {
        return $.ajax({
            type: 'POST',
            url: '../db/GetTabInformation.ashx',
            data: String(current),
            dataType: 'json',
            contentType: 'text/plain; charset-utf-8'
        });
    });
    var resultObject = new Object();
    resultObject[0] = $.when.apply($, requests);
    resultObject[1] = requests;
    return resultObject;
}

注意：我只做resultObject -thing，因为我需要initTabs()函数中的数组requests 。

非常感谢您对我的帮助！

Answer 1

您不会在loadTabInformation返回任何loadTabInformation ，因此您当然会undefined 。 您应该这样做：

function loadTabInformation() {
    ...
    return $.when.apply($, requests);
}

function initTabs() {
    loadTabInformation().done(function (tabs) {
        console.log(tabs); // (1)
        // do something else
    });    
}