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

Jquery 2.1 - wait for the two ajax calls to end and then destroy element

本文关键字：结束 调用 ajax 然后 元素 两个 等待 Jquery      更新时间：2023-09-26

我的函数中有两个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);
}

使用Deferred:

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

使用promise，特别是$.when方法来同步两者:

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

注。失去async: false选项!如今，它被认为是不好的做法，而且在任何情况下(没有双关语的意思)，它与使用承诺是不兼容的。

相关文章：