如果ajax需要不到X秒，如何延迟显示进度？ [英] How to delay showing of progress if ajax takes less than X seconds?

问题描述

我在一个网页上有几个AJAX呼叫。

我想添加一个加载器，它会在X秒后显示而AJAX正在处理结果。

我有一个加载器工作：

  $（document）.ajaxStart（function（）{
 $（＃loader）css（display，block）; 
}）ajaxSuccess （function（）{
 $（＃loader）css（display，none）; 
} 
  

此功能。

但是，当AJAX请求快速闪烁时，它会在屏幕上闪烁。就像眨眼一样。除了发生闪烁外，它的效果非常好。所以，我试图延迟加载程序css更改几秒钟，以便快速的结果不会导致闪烁。

我试图使用setTimeout和jQuery队列来延迟事情.. a la：

  $（document）.ajaxStart（function b 
 $ b $（＃loader）。queue（function（）{
 $（this）.delay（5000）; 
 $（this）.css block）; 
 $（this）.dequeue（）; 
}）; 
 
}）。ajaxSuccess（function（）{
 $（ loader）。css（display，none）; 
}）; 
  

或：

 code> $（document）.ajaxStart（function（）{
 
 setTimeout（function（）{
 $（＃loader）。css ）; 
}，5000）; 
 
}）ajaxSuccess（function（）{
 $（＃loader）。css（display，none ）; 
}）; 
  

_{（延迟jquery css更改）}

或：

$ b b

  $（document）.ajaxStart（function（）{
 $（＃loader）。delay（5000）.css（display，block ）
}）。ajaxSuccess（function（）{
 $（＃loader）。css（display，none）; 
} 
  

但我遇到的问题是任何尝试延迟css更改ajax开始最多经常导致延迟... 然后出现负载（在ajax完成后）。

因此，网页加载AJAX数据，5秒后...加载器出现。

有一个好的方法来告诉ajaxstart（）函数在执行之前等待X秒钟？

• 我不一定想使用像onBefore function（）这样的东西来使这部分实际的ajax调用，主要是因为一些结果返回得非常快，并且不需要任何进度指示器。通常情况下，不应显示进度 。

  大多数 ajax请求都在5秒内完成，只有少数请求需要10-20秒。 em>已向ajax调用中的完整函数（）添加了loader的删除。只是为了确保装载程序在ajax完成时消失。但是，如果ajax在任何setTimeout（）值到达之前完成（然后加载程序在不应该出现之后出现），那么这也会失败。

如果ajax需要X秒或更长时间，我只需要对元素进行CSS更改...可以这样做？

有一种方法来计算AJAX请求中的内容。

解决方案

setTimeout 有这个漂亮的功能，您可以在其中获取超时的引用并取消。

  var ajaxLoadTimeout; 
 $（document）.ajaxStart（function（）{
 ajaxLoadTimeout = setTimeout（function（）{
 $（＃loader）。css（display，block）; 
}，5000）; 
 
}）ajaxSuccess（function（）{
 clearTimeout（ajaxLoadTimeout）; 
 $（＃loader）。css display，none）; 
}）; 
 

这可以防止超时发生，而不是等待它，如果完成被调用，什么都不做（如雅各的回答）。

I've got a few AJAX calls on a page. Some complete instantaneously, others take a few moments -- all depending upon what is clicked.

I want to add a "loader" that will display after X seconds while AJAX is working on results.

I've got a loader working:

   $(document).ajaxStart(function() {
        $("#loader").css("display","block");
    }).ajaxSuccess(function() {
        $("#loader").css("display","none");
    });

This functions.

However, it flashes on screen when the AJAX request is fast... like in the blink of an eye. Other than the "blinking" which occurs, it works great. So, I'm trying to delay the loader css change for a few seconds so that rapid results don't result in the "blink".

I've attempted to use setTimeout and the jQuery queue to delay things.. a la:

$(document).ajaxStart(function() {

    $("#loader").queue(function(){
        $(this).delay(5000);
        $(this).css("display","block");
        $(this).dequeue();
    });

}).ajaxSuccess(function() {
    $("#loader").css("display","none");
});

or:

$(document).ajaxStart(function() {

    setTimeout(function() { 
        $("#loader").css("display","block");
    }, 5000);

}).ajaxSuccess(function() {
    $("#loader").css("display","none");
});

_{(delaying jquery css changes)}

or:

$(document).ajaxStart(function() {
    $("#loader").delay(5000).css("display","block")
}).ajaxSuccess(function() {
    $("#loader").css("display","none");
});

But the problem I'm running into is that any attempt to delay the css change on ajax start most often results in a delay... then the load appears (after ajax is done).

So the page loads the AJAX data then 5 seconds later... the loader appears.

Is there a good way to tell the ajaxstart() function to wait X seconds before executing?

• I don't necessarily want to make this part of the actual ajax calls using something like the onBefore function(), primarily because some result are returned very quickly and don't need any progress indicator. More often than not.. the progress should not be shown. Most ajax requests are completed in under 5 seconds, there are only a handful that may take 10-20 seconds.

• I have added the removal of the 'loader' to the complete function() in the ajax calls. Just to be certain the loader goes away when ajax is done. But this also fails if ajax is complete before any setTimeout() value is reached (and then the loader appears afterwards when it shouldn't).

I just want a css change on an element if the ajax is taking X seconds or more... can that be done?

Is there a way to time something within AJAX requests?

解决方案

setTimeout() has this nice feature where you can get a reference to the timeout and cancel it.

var ajaxLoadTimeout;
$(document).ajaxStart(function() {
    ajaxLoadTimeout = setTimeout(function() { 
        $("#loader").css("display","block");
    }, 5000);

}).ajaxSuccess(function() {
    clearTimeout(ajaxLoadTimeout);
    $("#loader").css("display","none");
});

This prevents the timeout from ever firing, rather than waiting for it and doing nothing if complete has been called (as in Jacob's answer).

这篇关于如果ajax需要不到X秒，如何延迟显示进度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！