Question

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

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

一旦完成所有3个功能，我怎样才能在jQuery中使用deferred然后再测试。

这是我的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

您需要首先让这些函数中的每一个返回jQuery在您发出AJAX请求时提供的延迟对象。然后，您可以将它们放入数组中，并将其应用于$.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();
        });    
    }
});

如何判断多个函数何时完成jQuery延迟

1 个答案: