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');

I попробовали разные комбинации функций обратного вызова ($('.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();. Они являются взаимоисключающими состояниями, поэтому вы можете проверить, отображается ли loadgif, и определить, следует ли вызывать stop или hide.