Effect.toggle и AJAX Calls

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

Спасибо! * * 1004

Answer 1

Простой подход заключается в создании переменной-счетчика, которая имеет область действия вне ваших двух функций, и увеличивает ее в onCreate и уменьшает в onComplete. Тогда прячьте спиннер только тогда, когда счетчик достигнет 0.

Answer 2

Вам необходимо вести подсчет количества обрабатываемых запросов AJAX и скрывать индикатор загрузки только в том случае, если дальнейшие запросы не обрабатываются.

Попробуйте код, подобный следующему:

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