jQuery AJAX가 너무 빨리 실행 됨

Question

함수에 래핑 된 비교적 간단한 jQuery AJAX 호출이 있으며 오류 기능을 테스트하고 있습니다. 내가 직면 한 문제는 AJAX 호출이 너무 빨리 발생한다는 것입니다! 그것은 'H6'과 '.loading'요소가 반복되기 시작합니다. 필요한 동작은 요소를 제거한 다음 ajax를 호출하는 것입니다.

function getAvailability(form) { 
    var str = $(form).serialize(), 
    warning = $('#content h6'); 

    if (warning.length > 0) { 
     $(warning).remove(); 
     $('<div class="loading">Loading&hellip;</div>').insertAfter(form); 
    } 
    else 
    { 
     $('<div class="loading">Loading&hellip;</div>').insertAfter(form); 
    } 

    $.ajax({ 
     type: "POST", 
     url: "someFile", 
     data: str, 

     success: function(calendar) { 
      $('.loading').fadeOut(function() { 
       $(this).remove(); 
       $(calendar).insertAfter(form).hide().fadeIn(); 
      }); 
     }, 
     error: function() { 
      $('.loading').fadeOut(function() { 
       $('<h6>Unfortunately there has been an error and we can not show you the availability at this time.</h6>').insertAfter(form); 
      }); 
     } 
    }); 

    return false; 
} 

이렇게 시퀀스를 좋아할 것입니다.> 페이지에서 '경고'를 제거하고 .loading을 추가하십시오. 그런 다음 AJAX를 트리거하십시오. 그런 다음 페이드 아웃로드, 성공에 대한 경고/캘린더에 따라 & 페이드 인을 추가하십시오.

---

나는 내 원래의 코드를 수정했다, 나는 예상대로 내가 아약스 과정에서 제출 버튼을 비활성화 주로하기 때문에 기능, 행동을 가지고있다.

function getAvailability(form) { 
    var str = $(form).serialize(), 
    btn = $('#property_availability'); 

    // Disable submit btn, remove original 'warning', add loading spinner 
    btn.attr("disabled", "true"); 
    $('.warning').remove(); 
    $('<div class="loading">Loading&hellip;</div>').insertAfter(form); 

    $.ajax({ 
     type: "POST", 
     url: "public/ajax/returnAvailability1.php", 
     data: str, 

     success: function(calendar) { 
      $('.loading').fadeOut(function() { 
       $(this).remove(); 
       $(calendar).insertAfter(form).hide().fadeIn(); 
      }); 
     }, 
     error: function() { 
      $('.loading').fadeOut(function() { 
       $(this).remove(); 
       $('<h6 class="warning">Unfortunately there has been an error and we can not show you the availability at this time.</h6>').insertAfter(form); 
       btn.removeAttr("disabled"); 
      }); 
     } 
    }); 

    return false; 
} 

원래 시퀀스가 ​​fadeOut() 함수에 의해 생성 된 시간 지연으로 인해 예상대로 작동하지 않았을 것으로 생각됩니다.

Answer 1

이벤트 순서를 지정해야하는 경우 jQuery.ajax API의 일부인 지연 및 약속 방법을 사용해보십시오. 이 기사는 다음과 같이 소개 할 수 있습니다. http://www.bitstorm.org/weblog/2012-1/Deferred_and_promise_in_jQuery.html

Answer 2

warning을 추가 및 제거하는 대신 ajaxStart 및 ajaxStop을 사용/표시하지 않는 이유는 무엇입니까?

warning.ajaxStart(function() { 
    $(this).show(); 
}).ajaxStop(function() { 
    $(this).fadeOut(); 
});