如果ajax小于X秒,如何延迟显示进度？

Question

我在页面上有一些AJAX调用.有些完成,其他人需要一些时间 - 所有这些都取决于点击的内容.

我想添加一个"加载器",它将在XAX后显示,同时AJAX正在处理结果.

我有一台装载机工作:

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

这个功能.

然而,当AJAX请求很快时,它会在屏幕上闪烁 ......就像眨眼间一样.除了发生的"眨眼"之外,它的效果很好.因此,我试图将加载程序css更改延迟几秒钟,以便快速结果不会导致"闪烁".

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

$(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");
});

_{(延迟jquery css的变化)}

要么:

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

但我遇到的问题是,任何试图延迟ajax启动时css更改的尝试最常导致延迟...... 然后出现负载(在ajax完成之后).

因此页面加载AJAX数据然后5秒钟......加载器出现.

有没有一种好方法告诉ajaxstart()函数在执行前等待X秒？

• 我不一定想使用类似onBefore函数()的东西来实现这部分实际的ajax调用,主要是因为某些结果很快返回并且不需要任何进度指示器.通常情况下,不应该显示进展情况.大多数 ajax请求在5秒内完成,只有少数可能需要10-20秒.

• 我已将 'loader'的删除添加到ajax调用中的complete函数()中.只是为了确定加载器在ajax完成时消失了.但是如果在达到任何setTimeout()值之前ajax完成,那么这也会失败(然后在不应该加载时出现加载器).

如果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的答案).