Effect.toggle 및 AJAX 호출

Question

다음 코드를 사용하여 호출이 완료 될 때까지 사용중인 회 전자를 표시하기 위해 내 앱에서 수행되는 모든 AJAX 호출을 캡처합니다. 요청이 잘 분리되어 있으면 잘 작동합니다. 그러나 요청이 신속하게 이루어지면 AJAX 호출 중 일부가 등록되지 않거나 onCreate 및 onComplete 동작이 동시에 시작되며 흔히 바쁜 회 전자가 화면에 계속 표시됩니다 , 모든 호출이 성공적으로 완료된 후에 호출이 끝날 때 수행 할 수있는 검사가 있는지, 요소가 표시되는지 여부를 확인하려면 숨길 수 있습니다.

document.observe("dom:loaded", function() { 
$('loading').hide(); 
Ajax.Responders.register({ 
//When an Ajax call is made. 
onCreate: function() { 
new Effect.toggle('loading', 'appear'); 
new Effect.Opacity('display-area', { from: 1.0, to: 0.3, duration: 0.7 }); 
}, 

onComplete: function() { 
new Effect.toggle('loading', 'appear'); 
new Effect.Opacity('display-area', { from: 0.3, to: 1, duration: 0.7 }); 
} 
}); 
}); 

고마워요!

Answer 1

처리중인 AJAX 요청 수를 유지해야하며 더 이상의 요청이 처리되지 않는 경우에만로드 표시기를 숨 깁니다. 다음과 같은

try 코드 :

document.observe("dom:loaded", function() { 

    var ajaxRequestsInProgress = 0; 

    $('loading').hide(); 

    Ajax.Responders.register({ 
    //When an Ajax call is made. 
    onCreate: function() { 
     if(!ajaxRequestsInProgress) 
     { 
     new Effect.toggle('loading', 'appear'); 
     new Effect.Opacity('display-area', { from: 1.0, to: 0.3, duration: 0.7 }); 
     } 
     ajaxRequestsInProgress++; 
    }, 

    onComplete: function() { 
     ajaxRequestsInProgress--; 
     if(!ajaxRequestsInProgress) 
     { 
     new Effect.toggle('loading', 'appear'); 
     new Effect.Opacity('display-area', { from: 0.3, to: 1, duration: 0.7 }); 
     } 
    } 
    }); 
}); 

Answer 2

간단한 접근법은 두 함수 밖의 범위를 가진 카운터 변수를 만들고 onCreate에서 증가시키고 onComplete에서 감소시키는 것입니다. 카운터가 0에 도달하면 회 전자를 숨 깁니다.