Jquery 2.1 - 等待兩個ajax調用結束然後銷燬元素

Question

在我的函數中有兩個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

使用Deferred：

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

Answer 2

使用承諾，特別是$.when方法來同步兩個：

var ajax1 = $.ajax(...) 

var ajax2 = $.ajax(...) 

$.when(ajax1, ajax2).done(function() { 
    popup.find('.popup-loading').remove(); 
}) 

附：失去async: false選項！這些天被認爲是不好的做法，無論如何（沒有雙關語意思），這與使用承諾是不相容的。