onComplete for Ajax.Request 캐시 된 콘텐츠가있는 버그

Question

로드 애니메이션 gif를 표시하거나 숨기려면 onLoading과 onComplete를 사용하는 Ajax.Request가 있습니다. 문제는 매번 10 번 클릭 할 때마다로드 애니메이션이 숨기지 못하고 AJAX 요청이 성공적으로 반환 되었더라도 애니메이션을 그대로 유지한다는 것입니다.

<div id="word_block_<%= word_obj.word %>" class="word_block" > 
    <%= image_tag("ajax-loader_word_block.gif", :id => "load_animation_#{word_obj.word}", 
        :style => 'display:none') %> 
    <a href="#" onclick="new Ajax.Request('/test/ajax_load', 
    {asynchronous:true, evalScripts:true, 
     onLoading:function() { 
     Element.show('load_animation_<%= word_obj.word %>')}, 
     onComplete:function(){ 
     Element.hide('load_animation_<%= word_obj.word %>')}}); 
     return false;">Click Here</a> 
    </div> 

는이 문제가 될 수 무엇처럼 보입니까 : 나는 각각 자신의 각각의 부하 애니메이션을 가지고 DIV 요소의 수와 같이 보이는 Ajax.Request로와 함께 온 클릭을? 어쩌면 나는 인라인 onclick 제거하고 자바 스크립트를 사용하여 프로그래밍 방식으로 onclick 추가해야합니까? 왜 이런 일이 계속 일어나는지 전혀 모르겠습니다. 레일에 루비가있는 프로토 타입 라이브러리를 사용하고 있습니다.

Answer 1

onLoading 속성이 너무 희박하다는 것을 알았습니다 ... 이미 쿼리가 캐시되어 있고 프론트 엔드 코드로 거의 즉시 복귀한다고 가정 해 봅시다. 이제는 어떤 이유로 든 onLoading 메서드를 실행하는 것이 onComplete 메서드보다 오래 걸린다 고 가정 해 봅시다. 마지막으로, Ajax가 비동기이며 onLoading 메서드가 onComplete 메서드를 시작하기 전에 완료 될 때까지 기다리지 않을 것이라고 가정 해 봅시다. 그리고 나서 문제의 이유가 있습니다! 요약하면 다음과 같습니다. - 요청이 전송되었습니다. - onLoading 메서드가 실행되었지만 어떤 이유로 시작되지 않았습니다. - 요청이 거의 즉시 반환됩니다. - onComplete 메서드가 실행되어 바로 시작됩니다. => onLoading이 시작되기 전에 완료 될 onComplete 메소드 : 요소가 숨겨지고 표시됩니다!

해결 방법 Ajax 요청 개체를 만들기 바로 전에 "Element.show ('load_animation_ < % = word_obj.word %>')}"를 사용하지 않으십시오. 따라서 onLoading 메서드와 함께 사용되는 "비동기 성"메서드에 의존하지 마십시오.

또한 요청을 캐시하지 못하도록하기 위해 항상 requestHeaders : [ "If-Modified-Since", "Fri, 31 Dec 1999 23:59:59 GMT"] "를 추가합니다. 특히 IE에서 캐시 된 아약스 요청은 큰 시간을 엉망으로 만들 수 있습니다!