$.when() 与延迟数组未调用完成操作答案

【问题标题】：$.when() with array of Deferreds not calling done action$.when() 与延迟数组未调用完成操作
【发布时间】：2016-12-29 09:39:01
【问题描述】：

我正在尝试在数组中使用一组可变的延迟函数以及$.when()。这些函数从服务器获取数据并将其呈现在 DOM 中。完成所有这些操作后，会加载一些脚本并执行一些加载后操作。

这是我正在使用的：

function loadAllGames(updateGames, updatePlayoffs) {
    var deferredLoads = [];
    if (updateGames !== false)
        deferredLoads.push($.Deferred(loadGames));

    if (updatePlayoffs !== false)
        deferredLoads.push($.Deferred(loadPlayoffs));

    $.when.apply($, deferredLoads).done(loadPostGamesLoadData);
}

问题是loadPostGamesLoadData 永远不会被调用。

loadGames 和 loadPlayoffs 都返回承诺：

function loadGames() {
    $.get('{% url wave_spinner_template %}', {message: 'Loading games...'}, function (data) {
        $('#weeks').html(data);
    });

    return $.ajax({
        url: "{% url weeks season.id %}",
        success: function (data) {
            $('#weeks').html(data);
        },
        error: function () {
            console.log("Error loading games.");
        }
    });
}

function loadPlayoffs() {
    $.get('{% url wave_spinner_template %}', {message: 'Loading playoffs...'}, function (data) {
        $('#playoffs').html(data).children('.spinner-container').addClass('border-top');
    });

    return $.ajax({
        url: "{% url playoffs season.id %}",
        success: function (data) {
            var $playoffs = $('#playoffs');
            if (!$playoffs.length) {
                $playoffs = $('<div>', {id: 'playoffs'});
                $('#weeks').after($playoffs);
            }
            $playoffs.html(data);
        },
        error: function () {
            console.log("Error loading playoffs.");
        }
    });
}

【问题讨论】：

没有返回任何承诺。
它正在返回$.ajax，我看到的所有示例都使用它来返回承诺。我应该怎么做？
以后，只需将您之前的问题编辑为相当不完整的问题，而不是制作一个完整的另一个问题。您可以随时使用“编辑”链接来修正您的问题。
@jfriend00：这是一个艰难的决定。这个问题是关于为什么在延迟完成之前调用loadPostGamesLoadData，并由adeno 正确回答。但随后揭示了 this 问题，延迟不正确，并且（在解决问题时 adeneo 指出）它根本没有被调用。问题不应该是移动目标（“好的，我解决了这个问题，但现在根本没有调用它？！”），所以有充分的理由发布一个新的、单独的问题。但这绝对是一条非常好的路线。
@jfriend00：我没有短路任何东西。我完全没有看到前面的问题。我看到并回答了这个。然后，后来，我看到你上面的评论，很好奇，就去找了。当然，也许 adeneo 可以标记并回答这两个部分（他在您提出评论之前发布了他的答案），但他没有，而且问题不应该成为移动目标。无论如何，这没什么大不了的。

标签： javascript jquery ajax jquery-deferred

【解决方案1】：

删除Deferred 调用，因为$.ajax 已经返回一个延迟。

function loadAllGames(updateGames, updatePlayoffs) {
    var deferredLoads = [];
    if (updateGames !== false)
        deferredLoads.push(loadGames());

    if (updatePlayoffs !== false)
        deferredLoads.push(loadPlayoffs());

    $.when.apply($, deferredLoads).done(loadPostGamesLoadData);
}

【讨论】：

【解决方案2】：

您错误地创建了延迟对象；实际上，您根本不应该创建它们。 $.Deferred 接受的函数是在 $.Deferred 返回之前运行的工厂函数，它接收新的延迟对象作为参数（因此您可以将处理程序附加到它）。 (Details in the API docs.) loadGames 根本不是这样的；他们返回一个延迟对象。所以你最终会得到什么都不会解决的延迟对象。

由于他们已经从 $.ajax 中延迟了对象，而您要返回这些对象，请直接使用这些函数：

function loadAllGames(updateGames, updatePlayoffs) {
    var deferredLoads = [];
    if (updateGames !== false)
        deferredLoads.push(loadGames());
// ------------------------^^^^^^^^^^^

    if (updatePlayoffs !== false)
        deferredLoads.push(loadPlayoffs());
// ------------------------^^^^^^^^^^^^^^

    $.when.apply($, deferredLoads).done(loadPostGamesLoadData);
}

【讨论】：