如何显示类似Google Maps的慢速AJAX请求警告？

Question

我目前正在使用ajaxStart、ajaxStop和ajaxSetups在使用jQuery的.load()函数加载页面时成功地显示一个“正在加载”的div。

我想做的是在ajax请求期间添加一个“这需要一段时间”的警告，比如Google Maps……

因此，在ajaxStart触发5秒后，“加载”div变成了"This is slow“。这应该会在ajaxStop上消失...

我目前所拥有的(下面)不起作用。在加载页面时，“正在加载”div会正确地出现和消失，但是在5000毫秒后出现"This is slow“错误，尽管页面已经成功加载。

$.ajaxSetup({
error:function(x,e){
    if('parsererror'==e) {
        $('.ajax-warning, ajax-errors').fadeOut('fast');
        $('#technical-error').fadeIn('fast');
        window.setTimeout(function(){
            $("#technical-error").fadeOut('fast');
        }, 3000);
    } else if('timeout'==e) {
        $('.ajax-warning, ajax-errors').fadeOut('fast');
        $('#timeout-error').fadeIn('fast');
    }
    else if ( "status" in x ) {
        if(0 == x.status){
            $('.ajax-warning, ajax-errors').fadeOut('fast');
            $('#offline-error').fadeIn('fast');
            window.setTimeout(function(){
                $("#offline-error").fadeOut('fast');
            }, 3000);
        }else if (404 == x.status){
            $('.ajax-warning, ajax-errors').fadeOut('fast');
            $('#404-error').fadeIn('fast');
            window.setTimeout(function(){
                $("#404-error").fadeOut('fast');
            }, 3000);
        }else if(500 == x.status){
            $('.ajax-warning, ajax-errors').fadeOut('fast');
            $('#500-error').fadeIn('fast');
            window.setTimeout(function(){
                $("#500-error").fadeOut('fast');
            }, 3000);
        }
    }
    else {
        $('.ajax-warning, ajax-errors').fadeOut('fast');
        $('#unknown-error').fadeIn('fast');
        window.setTimeout(function(){
            $("#500-error").fadeOut('fast');
        }, 3000);
    }
}
});

$(document).ajaxStart(function(){
$('.ajax-warning, ajax-errors').fadeOut('fast');
$("#loading-warning").fadeIn('fast');
window.setTimeout(function(){
    $('.ajax-warning, ajax-errors').fadeOut('fast');
    $("#timeout-error").fadeIn('fast');
}, 5000);
});

$(document).ajaxStop(function(){
$("#loading-warning").fadeOut('fast');
clearTimeout();
});

$(document).ajaxError(function(){
$('.ajax-warnings').fadeOut('fast');
$('#loading-error').fadeIn('fast');
window.setTimeout(function(){
    $("#loading-error").fadeOut('fast');
}, 3000);
});

如果有人能为我指明正确的方向，我将不胜感激！

更新：

作为对Korvin的响应，我现在有以下代码-超时错误现在根本不会出现。

var loadingTimer = setTimeout(function(){
        $('.ajax-warning, ajax-errors').fadeOut('fast');
        $("#timeout-error").fadeIn('fast');
    }, 5000);

$(document).ajaxStart(function(){
$('.ajax-warning, ajax-errors').fadeOut('fast');
$("#loading-warning").fadeIn('fast');
setTimeout(loadingTimer);
});

$(document).ajaxStop(function(){
$("#loading-warning").fadeOut('fast');
clearTimeout(loadingTimer);
});

Answer 1

好的，在Korvin的帮助下，我想出了这个问题的解决方案：

var loadingTimer = null;

$(document).ajaxStart(function(){
$('.ajax-warning, ajax-errors').fadeOut('fast');
$("#loading-warning").fadeIn('fast');
loadingTimer = setTimeout(function(){
        $('.ajax-warning, ajax-errors').fadeOut('fast');
        $("#timeout-error").fadeIn('fast');
        },3000);
});

$(document).ajaxStop(function(){
$(".ajax-warning, .ajax-errors").fadeOut('fast', function(){
    clearTimeout(loadingTimer);
});
});

本质上，它所做的就是在我的站点上的每个AJAX事件加载3秒后，显示一个正在加载的div (一个引导程序警告div，很抱歉造成混淆)和一个"This is slow“div (另一个引导程序警告，这次是红色的)。

Answer 2

您可以在其中创建一个在ajax响应中被清除的setTimeout，如下所示：

var timer = setTimeout(function(){ alert('Woah, this is taking so long!'); },500);
$.post('myscript.format',{data:data},function(e) {
     clearTimeout(timer);
     do(stuff);
});