Question

我们使用与此类似的代码

var $loading = $('#loadingDiv').hide();
$(document)
  .ajaxStart(function () {
    $loading.show();
})
.ajaxStop(function () {
   $loading.hide();
});

在我们的页面上，我们有很多ajax调用，并且加载符号经常弹出。有没有办法让它只显示ajax调用是否超过3秒？

Answer 1

你可以添加一个计时器，并在ajax完成时清除计时器，以防它还没有被解雇。

var $loading = $('#loadingDiv').hide();
var timeOutHandler;
$(document)
  .ajaxStart(function () {
   timeOutHandler = setTimeout(function(){$loading.show();}, 3000);
})
.ajaxStop(function () {
   clearTimeout(timeOutHander);
   $loading.hide();
});

Answer 2

脱离我的头脑并不是jquery有.delay()？

var $loading = $('#loadingDiv').hide();
$(document)
   .ajaxStart(function () {
    $loading.delay(3000).show();
})
.ajaxStop(function () {
   $loading.hide();
});

Answer 3

尝试使用超时，例如

var $loading = $('#loadingDiv').hide();
var loadingTimer;
$(document)
  .ajaxStart(function () {
    // clear existing if any
    clearTimeout(loadingTimer);
    loadingTimer = setTimeout(showLoading, 3000)
})
.ajaxStop(function () {
    // clear timeouts that haven't yet happened
    clearTimeout(loadingTimer);
    $loading.hide();
});
function showLoading(){
    $loading.show();
}

快速清洁

Answer 4

这里有一个不错的小插件

https://github.com/bstaley/aspectorientedajax/blob/master/aOAjax.js

你可以传递一个前后功能。它将挂钩到ajax请求并跟踪未完成的请求。所以例如，如果你有5个ajax调用相互重叠，它可以显示在第一个上，然后隐藏在最后一个之后。它是vanilla JavaScript，只需要调用一次，它就像new AjaxAspect(showFunc,hideFunc);

一样简单

这是一个小提琴，应该向您展示如何实现这一目标。 http://jsfiddle.net/bstaley/9VaeC/

仅在长负载时显示ajax加载符号

4 个答案: