Question

我有一个函数将表单提交给mvc控制器，如下所示 -

function submitForm() {
            $.ajax
            ({
                type: 'POST',
                url: '/Users/Index',
                data: $('#searchForm').serialize(),
                beforeSend: function() { 
                    $('.usersearchresult').fadeOut('fast', function () { $('.loadinggif').show(); }); 
                    },
                success: function (response) {
                    $('.loadinggif').hide();
                    $('.usersearchresult').hide().html(response).fadeIn('normal');

                }
            });

            return false;
        }

此工作正常，除非响应过快发生$('.loadinggif').hide(); $('.usersearchresult').hide().html(response).fadeIn('normal');

之后发生
我尝试了回调函数的不同组合（$('.loadinggif').hide();在回调时调用$('.usersearchresult').hide().html(response).fadeIn('normal');，甚至反过来，行为总是一样的。

我是jquery的新手;任何帮助将不胜感激！

Answer 1

问题是如果响应返回太快，fadeOut动画尚未完成。

要解决此问题，请使用stop方法，该方法将结束动画：

success: function (response) {
    $('.usersearchresult').stop();
    $('.loadinggif').hide();
    $('.usersearchresult').hide().html(response).fadeIn('normal');

}

请注意，stop会阻止调用回调，因此.loadinggif动态仍在运行时，如果响应回来，fadeOut将永远不会显示。最简单的方法是同时调用$('.usersearchresult').stop();和$('.loadinggif').hide();。它们是互斥状态，因此您可以测试loadinggif是否正在显示，并确定是否应该调用stop或hide。

Jquery执行序列

1 个答案: