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

一种简单的方法是创建一个计数器变量，其范围在两个函数之外，并在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 });
       }
     }
  });
});

Effect.toggle和AJAX调用

2 个答案: