javascript - 如何使用 jQuery deferred 判断多个函数何时完成

Question

我有 3 个函数处理从 AJAX 提取的数据，它们在调用 ajax 函数后更新页面。

当调用 AJAX 函数时我显示一个加载器，我想在 AJAX 完成并且函数完成后隐藏加载器。

一旦所有 3 个函数都完成，我如何在 jQuery 中使用 deferred with when 和 then 来测试。

这是我的 AJAX 代码，这会在 AJAX 成功时隐藏加载程序，理想情况下这将在 3 个功能完成/成功之后。

这3个函数接收数据进行处理并显示在页面上，它们不是AJAX函数。

function setUpStocking() {
    $.ajax({
        url: url,
        cache: false,
        beforeSend: function(){
            // Show loader
            $('.loader').show();
        },
        success: function(data){

            updateMyList(data.gifts);
            updateRecievedGift(data.recieved);
            updateGiftsOpenedToday(data.opened);

            // Hide loader
            $('.loader').hide();

        }
    });
}

这些函数在 AJAX 函数之外:

function updateMyList(gifts) {
    // Get data, process it and add it to page
}

function updateRecievedGift(recieved) {
    // Get data, process it and add it to page
}

function updateGiftsOpenedToday(opened) {
    // Get data, process it and add it to page
}

Answer 1

当您发出 AJAX 请求时，您首先需要让这些函数中的每一个都返回 jQuery 为您提供的延迟对象。然后您可以将它们放入数组中，并将其应用于 $.when()。像这样:

var deferreds = [];
$.ajax({
    url: url,
    cache: false,
    beforeSend: function(){
        // Show loader
        $('.loader').show();
    },
    success: function(data){
        deferreds.push(updateMyList(data.gifts));
        deferreds.push(updateRecievedGift(data.recieved));
        deferreds.push(updateGiftsOpenedToday(data.opened));

        $.when.apply(deferreds).done(function() {
            // Hide loader
            $('.loader').hide();
        });    
    }
});