Javascript не работает в заказе

Question

У меня проблема с моим javascript, который не работает, чтобы отправить событие. я иметь форму более или менее так:

<form id="myForm"> 
    <div> 
    <button type="submit" name="submit">Submit</button> 
    </div> 
    <div> 
    <div id="loading" style="display:none;"><img src="images/loading.gif"/></div> 
    <div id="hasil" style="display:none;"></div> 
    </div> 
</form> 

и Javascript функция AJAX:

$('#myForm').submit(function() { 
    $('#hasil').fadeOut('fast', function() { 
    alert('a'); 
    $('#loading').fadeIn('fast'); 
    }); 
    $.ajax({ 
    type: 'POST', 
    url: $(this).attr('action'), 
    data: $(this).serialize(), 
    success: function(data) { 
     if(data=='0'){ 
     $('#hasil').html('Code Already Exist'); 
     $('#loading').fadeOut('fast', function() { 
      alert('d'); 
      $('#hasil').fadeIn(); 
     }); 
     } 
    } 
    }); 
    return false; 
}); 

он должен показать #loading, скрыть #loading, а затем показать #hasil. сначала отправьте, он будет работать без проблем. но когда я отправляю его во второй раз, скрипт не работает упорядоченно сверху вниз, а не из точки «d», затем «a» (alert()).

Интересно, почему сценарий работает так? я где-то ошиблась?

Answer 1

Ссылка на API документа JQuery: http://api.jquery.com/fadeout/

обратного вызова вызывается после завершения анимации.

Таким образом, если запрос ajax был завершен быстрее, чем анимация с постепенным исчезновением, сначала произойдет точка «d», а затем точка «a».

Вы можете поместить запрос ajax в функцию обратного вызова fade out для решения проблемы.

$('#myForm').submit(function(e) { 
    $('#hasil').fadeOut('fast', function() { 
     alert('a'); 
     $('#loading').fadeIn('fast'); 
     $.ajax({ 
      type: 'POST', 
      url: $(this).attr('action'), 
      data: $(this).serialize(), 
      success: function(data) { 
       if(data=='0'){ 
        $('#hasil').html('Code Already Exist'); 
        $('#loading').fadeOut('fast', function() { 
         alert('d'); 
         $('#hasil').fadeIn(); 
        }); 
       } 
      } 
     }); 
    }); 
    return false; 
});