0

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

我想做的是在ajax请求期间添加一个“这需要一段时间”警告，比如谷歌地图......

因此，在 ajaxStart 触发 5 秒后，“LOADING” div 变为“这很慢”。然后应该在 ajaxStop 上消失....

我目前拥有的（如下）不起作用。在加载页面时，“LOADING” div 会正确显示和消失，但在 5000 毫秒后出现“这很慢”错误，尽管页面已成功加载。

$.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);
});
4

2 回答 2

0

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

var timer = setTimeout(function(){ alert('Woah, this is taking so long!'); },500);
$.post('myscript.format',{data:data},function(e) {
     clearTimeout(timer);
     do(stuff);
});
于 2012-09-16T11:44:26.663 回答
0

好的，经过 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 秒后显示一个 LOADING div（一个引导警报 div，很抱歉造成混淆）和一个“这很慢”的 div（另一个引导警报，这次是红色）地点。

于 2012-09-16T13:38:29.043 回答