javascript - Jquery 2.1 - 等待两个ajax调用结束然后销毁元素

Question

这个问题已经有答案了:

jQuery Wait until async ajax calls are finished (4 个回答)

已关闭 9 年前。

在我的函数中有两个 ajax 调用。当两个ajax调用完成后，需要删除.popup-loading。我怎样才能做到这一点？

功能:

// Create login/create user panel
function createPopupUser() {
    var
        body      = $('body'),
        baseUrl   = body.data('base-url'),
        // start of user panel
        userPanel = '<div class="popup-container">';
        userPanel += '<div class="popup-loading">';
        userPanel += '</div>';
        userPanel += '<div class="popup-panel">';
        userPanel += '<div class="popup-new-user">';
        userPanel += '</div>';
        userPanel += '<div class="popup-login">';
        userPanel += '</div>';
        userPanel += '</div>';
        userPanel += '</div>';
        // end of user panel

    $('body').prepend(userPanel);

    var newUserResponse, loginResponse;
    $.ajax({ type: "GET",
        url: baseUrl + 'users/create',
        async: false,
        success : function(text)
        {
            newUserResponse = text;
        }
    });

    $.ajax({ type: "GET",
        url: baseUrl + 'users/login',
        async: false,
        success : function(text)
        {
            loginResponse = text;
        }
    });

    var popup = $('body').find('.popup-container');
    $( document ).ajaxComplete(function() { popup.find('.popup-loading').remove(); });
    popup.find('.popup-new-user').append(newUserResponse);
    popup.find('.popup-login').append(loginResponse);

}

Answer 1

使用延迟:

$def1 = $.ajax({...});
$def2 = $.ajax({...});
// Do stuff
$.when($def1, $def2).done(function() {
    // Remove loading indicator
});