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。