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 请求数，并且仅在没有其他请求正在处理时才隐藏加载指示器。

尝试类似以下的代码：

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 时才隐藏微调器。