Question

我有一个包含在函数中的相对简单的jQuery AJAX调用，我正在测试我的错误功能。我面临的问题是AJAX调用发生得太快了！它导致我的'H6'和'.loading'元素开始重复。我需要的行为是删除元素，然后调用ajax。

function getAvailability(form) {
    var str = $(form).serialize(),
    warning = $('#content h6');

    if ( warning.length > 0 ) {
        $(warning).remove();
        $('<div class="loading">Loading&hellip;</div>').insertAfter(form);
    }
    else
    {
        $('<div class="loading">Loading&hellip;</div>').insertAfter(form);
    }

    $.ajax({
        type: "POST",
        url: "someFile",
        data: str,

        success: function(calendar) {
            $('.loading').fadeOut(function() {
                $(this).remove();
                $(calendar).insertAfter(form).hide().fadeIn();
            });
        },
        error: function() {
            $('.loading').fadeOut(function() {
                $('<h6>Unfortunately there has been an error and we can not show you the availability at this time.</h6>').insertAfter(form);
            });
        }
    });

    return false;
}

我很想按顺序排序 - ＆gt;从页面中删除“警告”，添加.loading。然后触发AJAX。然后淡出.loading，add＆amp;根据成功而淡化警告/日历。

我已经修改了我的原始代码，并且我已经让函数按预期运行，主要是因为我在ajax过程中禁用了提交按钮。

function getAvailability(form) {
    var str = $(form).serialize(),
    btn = $('#property_availability');

    // Disable submit btn, remove original 'warning', add loading spinner
    btn.attr("disabled", "true");
    $('.warning').remove();
    $('<div class="loading">Loading&hellip;</div>').insertAfter(form);

    $.ajax({
        type: "POST",
        url: "public/ajax/returnAvailability1.php",
        data: str,

        success: function(calendar) {
            $('.loading').fadeOut(function() {
                $(this).remove();
                $(calendar).insertAfter(form).hide().fadeIn();
            });
        },
        error: function() {
            $('.loading').fadeOut(function() {
                $(this).remove();
                $('<h6 class="warning">Unfortunately there has been an error and we can not show you the availability at this time.</h6>').insertAfter(form);
                btn.removeAttr("disabled");
            });
        }
    });

    return false;
}

我认为由于fadeOut（）函数产生的时间延迟，原始序列没有按预期工作。

Answer 1

为什么不显示/隐藏利用ajaxStart和ajaxStop，而不是添加和删除warning？

warning.ajaxStart(function() {
    $(this).show();
}).ajaxStop(function() {
    $(this).fadeOut();
});

Answer 2

如果您需要对事件进行排序，那么您应该尝试使用作为jQuery.ajax API一部分的deferred和promise方法。本文很好地介绍了它们：http://www.bitstorm.org/weblog/2012-1/Deferred_and_promise_in_jQuery.html

jQuery AJAX触发太快了

2 个答案: