显示AJAX加载符号

我们用类似这样的显示AJAX加载符号

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

代码在我们的页面，我们有很多的AJAX调用和装载符号的方式往往弹出。有没有办法让它只显示如果ajax调用超过3秒？

来源

2014-04-03 Nick

顶我的脑袋不jquery有.delay()？

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

来源

2014-04-03 19:52:11

我不认为延迟会在这里工作，因为它不能被取消。因此，如果ajax在2秒内完成，加载动画将在加载后1秒出现，并且永远不会隐藏。 – Smeegs

你可以添加一个计时器，当阿贾克斯还没有发射的情况下完成清零定时器。

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

来源

2014-04-03 19:52:18 Smeegs

看起来像你使用'clearInterval'而不是'clearTimeout' – aravind

良好的捕获，修复。 – Smeegs

如果您更正了第2行中的错字'timeOutHander'，我认为解决方案非常完美。 –

尝试使用超时，这样

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

快速，干净

来源

2014-04-03 19:55:38 aravind

有一个可爱的小插件这里

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

你可以通过它预先和后期功能。它将钩入ajax请求并跟踪未完成的请求。例如，如果您有5个互相重叠的Ajax调用，它可以在第一个显示，并在最后一个之后隐藏。这是香草JavaScript，只需要调用一次，它就像new AjaxAspect(showFunc,hideFunc);

这里是一个小提琴，应该告诉你如何实现这一点。 http://jsfiddle.net/bstaley/9VaeC/

来源

2014-05-02 12:58:00

显示AJAX加载符号

回答

相关问题