jQuery AJAX同步请​​求行为

Question

我有一个试图同步调用的ajax地址验证功能，如下所示：

function validate_address(address, city, state, zip) {
    return $.ajax({
        type: 'POST',
        url: '/ajax/address',
        data: {
            address: address,
            city: city,
            state: state,
            zip: zip
        },
        dataType: "json",
        cache: false,
        async: false
    }).responseText;
}

在调用函数之前，我先显示旋转的gif并将其隐藏在函数之后：

$('#spinner').show();
var res = validate_address(address, city, state, zip);
$('#spinner').hide();

问题是show()和hide()函数都在ajax调用完成后被调用。

我通过在服务器端向ajax调用添加5秒的延迟来验证这一点。 我触发此序列后5秒钟，彼此立即立即调用show()和hide() 。

在您叫我出去之前，我知道不鼓励同步请求。 在这种情况下，我必须使用同步调用。 我只是在尝试这里发生的事情以及如何解决它。

Answer 1

您已经返回了ajax函数的deferred，因此只需使用done() ：

$('#spinner').show();
validate_address(address, city, state, zip).done(function(data) {
    res = data;
    $('#spinner').hide();
});

这甚至可以处理异步请求？

如果微调框的显示仍然很慢，并且您想进一步降低用户体验，则可以始终使用回调：

$('#spinner').show(1000, function() {
    validate_address(address, city, state, zip).done(function(data) {
        res = data;
        $('#spinner').hide();
    });
});

Answer 2

那ajaxStart和ajaxEnd

看一下这篇文章： 如何使用jQuery创建“ Please Wait，Loading ...”动画？

$("body").on({
    // When ajaxStart is fired, add 'loading' to body class
    ajaxStart: function() { 
        $(this).addClass("loading");  // or do what you need here 
    },
    // When ajaxStop is fired, rmeove 'loading' from body class
    ajaxStop: function() { 
        $(this).removeClass("loading"); // or do what you need here 
    }    
});