javascript - 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 函数返回了延迟，因此只需使用 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();
    });
});