jquery - 当所有ajax请求完成后，

Question

我需要执行一堆 ajax 请求(我需要这样做来填充一些选择框)，并在加载所有内容后隐藏加载面板。

如果我这样做，效果会很完美:

$.when(
    $.getJSON(applicationUrl + "data/codiciPaese.json", function (json) {
        data.codiciPaese = json;
        $.each(data.codiciPaese, function (index, item) {
            $(".codiciPaese").append($('<option>', {
                value: item.code,
                text: item.code + " - " + item.name
            }));
        });
    }),
    $.getJSON(applicationUrl + "data/regimiFiscali.json", function (json) {
        data.regimiFiscali = json;
        $.each(data.regimiFiscali, function (index, item) {
            $(".regimiFiscali").append($('<option>', {
                value: item.code,
                text: item.code + " - " + item.name
            }));
        });
    }),
    $.Deferred(function (deferred) {
        $(deferred.resolve);
    })
).done(function () {
    $('#loading').fadeOut(800, function () {
        // something else
    });
});

但是，由于我想采用 DRY 原则:)并且由于将有两个以上的请求，因此我尝试将 getJSON 请求包装到每个循环中:

var elementsToGet = { // I'll reuse this to get the values elsewhere
    codiciPaese: "HY",
    regimiFiscali: "RF01",
};

$.when(
    $.each(elementsToGet, function (element, defaultValue) {
        $.getJSON(applicationUrl + "data/"+element+".json", function (json) {
            data.element = json;
            $.each(data.element, function (thisIndex, thisElement) {
                $(parent + " ."+element).append($('<option>', {
                    value: thisElement.code,
                    text: thisElement.code + " - " + thisElement.name
                }));
            });
        });
    }),
    $.Deferred(function (deferred) {
        $(deferred.resolve);
    })
).done(function () {
    $('#loading').fadeOut(800, function () {
        // something else
    });
});

问题是这种方式不再使用“延迟”，因此加载面板在加载所有数据之前就消失了。我做错了什么？

Answer 1

我认为你可以向 $.when 提供多个 promise :

var promises = $.map(elementsToGet, function(element, defaultValue) {
        return $.getJSON(applicationUrl + "data/" + element + ".json", function(json) {
            $.each(data.element, function(thisIndex, thisElement) {
                $(parent + " ." + element).append($('<option>', {
                    value: thisElement.code,
                    text: thisElement.code + " - " + thisElement.name
                }));
            });
        });
    });

$.when.apply(null, promises).done(function() {
    $('#loading').fadeOut(800, function() {
        // something else
    });
});

注意，.apply(null, Promise) 在这里是因为 $.when 期望延迟对象以 $.when( d1, d2, d3 ) 而不是数组。