$.when() 与 Deferreds 数组不调用完成的动作

Question

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

这是我正在使用的：

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 return 都承诺：

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.");
        }
    });
}

Answer 1

放弃 Deferred 调用，因为 $.ajax 已经 returns 延迟。

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

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

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

Answer 2

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

因为他们已经有来自 $.ajax 的延迟对象，你正在 returning，直接使用这些函数：

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

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

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

$.when() 与 Deferreds 数组不调用完成的动作

$.when() with array of Deferreds not calling done action

javascript

ajax

jquery

jquery-deferred