0

我有一个试图同步调用的 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 秒延迟来验证这一点。show()并且hide()在我触发此序列后 5 秒后立即被调用。

在你打电话给我之前，我知道不鼓励同步请求。在这种情况下，我必须使用同步调用。我只是在尝试这里发生了什么以及如何解决它。

4

2 回答 2

3

您已经从 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();
    });
});
于 2012-12-11T23:36:17.600 回答
0

关于ajaxStart和ajaxEnd

看看这篇文章：如何使用 jQuery 创建“请稍候，正在加载...”动画？ 

$("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 
    }    
});
于 2012-12-11T23:44:21.027 回答