Javascript Effect.toggle和AJAX调用

我正在使用下面的代码捕获从我的应用程序发出的所有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 });
}
});
});

---

谢谢

一种简单的方法是创建一个范围超出两个函数的计数器变量，并在onCreate中递增，在onComplete中递减。然后，仅当计数器达到0时才隐藏微调器。

您需要记录正在处理的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 });
       }
     }
  });
});

---

谢谢工作起来很有魅力。bmoeskau和Josh建议的答案都传达了相同的想法！