Question

我目前有以下代码：

function render(url1, url2, message) {
    utility.messageBoxOpen(message);

    $.getJSON(url1, function (items) {
        // Do something

        utility.messageBoxClose();
    });

    $.getJSON(url2, function (items) {
        // Do something
    });
}

执行该功能时，会出现一个模态窗口，通知用户正在加载某些内容。最初我只有一个$ getJSON请求，所以当请求完成时，模态窗口按照上面的代码关闭。

我希望添加另一个$ getJSON请求，但只有在两个$ getJSON请求都完成时才想关闭模态窗口。

实现这一目标的最佳方式是什么？

Answer 1

变量

function render(url1, url2, message) {
utility.messageBoxOpen(message);
var isOneDone = false;
$.getJSON(url1, function (items) {
    // Do something
    if(!isOneDone)
        isOneDone = true;
    else
        utility.messageBoxClose();
});

$.getJSON(url2, function (items) {
    // Do something

    if(!isOneDone)
        isOneDone = true;
    else
        utility.messageBoxClose();
});

}

Answer 2

您正在寻找$.when()

所有jQuery ajax请求（包括getJSON等快捷方式）都会返回延迟对象，可用于控制其他操作。

var dfd1 = $.getJSON(url1, function (items) {
    // Do something    
});

var dfd1 =  $.getJSON(url2, function (items) {
    // Do something
});

$.when(dfd1, dfd2).then(function(){
    //both succeeded
    utility.messageBoxClose();
},function(){
    //one or more of them failed
});

如果您不关心getJSONs是否成功返回，而只关心它们已经完成，您可以改为：

$.when(dfd1, dfd2).done( utility.messageBoxClose );

Answer 3

您可以使用getJSON()将$.ajax调用替换为$.ajax({ url: http://whatever, dataType: 'json', async: false, data: {data}, success: function(data) { // do the thing } });来完成相同的操作，但会为您提供更多灵活性：

async:false

注意{{1}}部分 - 这会使代码执行暂停，直到请求完成。所以你可以这样简单地进行两次调用，并在第二次调用完成后关闭对话框。

Answer 4

function render(url1, url2, message) {
    utility.messageBoxOpen(message);
    $.when($.getJSON(url1, function (items) {
        // Do something
        utility.messageBoxClose();
    }), $.getJSON(url2, function (items) {
        // Do something
    })).then(function () {
        //Both complete
    });
}

jQuery.when

找出两个JSON请求何时完成

4 个答案: