Javascript JQuery AJAX同步请求行为

我尝试同步调用一个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秒后立即调用的

---

在您呼叫我之前，我知道不鼓励同步请求。在这种情况下，我必须使用同步调用。我正在尝试这里发生的事情以及如何修复它。

您已经从ajax函数返回了延迟，所以只需使用

done（）

：

这甚至可以用于异步请求

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

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

---

您已经从ajax函数返回了deferred，所以只需使用

done（）

：

这甚至可以用于异步请求

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

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

---

那么

ajaxStart

和

ajaxEnd

请看这篇文章：

---

那么

ajaxStart

和

ajaxEnd

请看这篇文章：

---

“这不是您正在寻找的Ajax”，您应该使用异步请求，不管您有什么理由锁定浏览器？jQuery动画不会等待其他功能。看看这个：为什么你认为你必须做一个同步呼叫？在我看来，这就是DOM在显示和隐藏调用之间无法呈现的原因（是的，它是在ajax调用之前执行的）@nathancahill:是的，似乎需要使调用异步。是什么阻止你这么做的？^现在我读到了，这听起来很愚蠢。只是围绕回调重构了我所有的代码，一切正常。感谢@Bergi和adeneo的帮助，非常感谢。“这不是您正在寻找的Ajax”，您应该使用异步请求，无论您有什么理由锁定浏览器？jQuery动画不会等待其他功能。看看这个：为什么你认为你必须做一个同步呼叫？在我看来，这就是DOM在显示和隐藏调用之间无法呈现的原因（是的，它是在ajax调用之前执行的）@nathancahill:是的，似乎需要使调用异步。是什么阻止你这么做的？^现在我读到了，这听起来很愚蠢。只是围绕回调重构了我所有的代码，一切正常。感谢@Bergi和adeneo的帮助，非常感谢。不，他确实返回了

responseText

I添加了许多console.log调用。上面的代码在Firefox中运行良好。在ajax调用完成之前，Safari不会设置动画或记录任何内容。Chrome在请求之前和之后都会记录，但不会设置任何动画。@nathancahill-上面Bergi说的。删除responseText行！不，他确实返回了

responseText

I添加了许多console.log调用。上面的代码在Firefox中运行良好。在ajax调用完成之前，Safari不会设置动画或记录任何内容。Chrome在请求之前和之后都会记录，但不会设置任何动画。@nathancahill-上面Bergi说的。删除responseText行！

$("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 
    }    
});