jQuery的执行顺序

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。