javascript - 通过多个 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 请求完成后在完成回调函数之外执行应该执行的逻辑。它们一定在里面(如果你仔细想想，这是有道理的)。并且很多控制台输出都有帮助，可以查看什么函数返回什么样的对象。

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 事情，因为我需要 initTabs() 函数中的数组 requests。

非常感谢您对我的帮助!

Answer 1

您不会在 loadTabInformation 中返回任何内容，因此您当然会得到 undefined。你应该这样做:

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

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