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秒延迟来验证这一点。在我触发此序列后，show()和hide()在我们每隔5秒后立即被调用。

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

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

Answer 2

ajaxStart和ajaxEnd

怎么样？

看一下这篇文章：How can I create a "Please Wait, Loading..." animation using 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 
    }    
});

JQuery AJAX同步请求行为

2 个答案:

JQuery AJAX同步请​​求行为

2 个答案:

JQuery AJAX同步请求行为