如果ajax花费不到X秒，如何延迟进度显示？

Question

我在页面上有几个AJAX呼叫。有些会立即完成，有些会花费一些时间-所有都取决于单击的内容。

我想添加一个“加载程序”，该加载程序将在AJAX处理结果时X秒钟后显示。

我有一个装载机正在工作：

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

此功能。

但是， 当AJAX请求很快时，它 会 在屏幕上 闪烁
……就像眨眼一样。
除了发生“闪烁”以外，它的效果还不错。因此，我试图将加载器的CSS更改延迟几秒钟，以使快速结果不会导致“闪烁”。

我试图使用setTimeout和jQuery队列来延迟事情。

$(document).ajaxStart(function() {

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

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

要么：

$(document).ajaxStart(function() {

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

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

要么：

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

但是我遇到的问题是，任何试图延迟ajax启动时的css更改的尝试通常都会导致延迟… 然后 出现负载（在ajax完成之后）。

因此页面加载了AJAX数据，然后5秒钟后…加载器出现。

有没有办法告诉ajaxstart（）函数在执行前等待X秒？

• 我不一定要使用诸如onBefore function（）之类的东西来进行实际的Ajax调用，这主要是因为某些结果可以非常快速地返回并且不需要任何进度指示器。更多的往往不是..进度应该 不会 显示。 大多数 ajax请求在5秒内完成，只有极少数的请求可能需要10到20秒。

• 我 已经 增加了去除“加载”到Ajax调用功能齐全（）的。可以肯定的是，ajax完成后，加载程序就消失了。但是，如果ajax在到达任何setTimeout（）值之前已完成（然后加载器随后在不应该加载的情况下出现），则此操作也将失败。

如果ajax花费X秒或更长时间，我只想对元素进行CSS更改…可以做到吗？

在AJAX请求中是否可以计时？

Answer 1

setTimeout()具有这个不错的功能，您可以在其中获取超时参考并取消超时。

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

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

这样可以防止超时，而不是等待超时，并且如果已调用完成，则什么也不做（如Jacob的回答）。