jquery - 如果 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");
});

_{( delaying jquery css changes )}

或:

$(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 秒。

• 我已经在 ajax 调用中将“加载器”的删除添加到完整的 function() 中。只是为了确定加载器在 ajax 完成后消失。但是，如果 ajax 在达到任何 setTimeout() 值之前完成(然后加载器在不应该出现的时候出现)，这也会失败。

如果 ajax 需要 X 秒或更长时间，我只想更改元素的 css...这可以完成吗？

有没有办法在 AJAX 请求中计时？

Answer 1

setTimeout() 有这个 nice feature您可以在其中获取超时的引用并取消它。

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

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

这可以防止超时触发，而不是等待超时并且在调用 complete 时什么也不做(如 Jacob 的回答)。