0

現在、ajaxStart、ajaxStop、およびajaxSetupsを使用して、jQueryの.load（）関数を使用してページが読み込まれているときに「LOADING」divを正常に表示しています。

私がやりたいのは、Googleマップのように、ajaxリクエスト中に「これにはしばらく時間がかかります」という警告を追加することです。

したがって、ajaxStartが起動してから5秒後に、「LOADING」divは「Thisisslow」になります。その後、ajaxStopで消えるはずです。

私が現在（以下に）持っているものは機能しません。ページをロードすると、「LOADING」divが正しく表示および非表示になりますが、ページが正常にロードされたにもかかわらず、5000ミリ秒後に「Thisisslow」エラーが表示されます。

$.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

次のように、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);
});
于 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);
});
});

基本的に、これは LOADING div (ブートストラップ アラート div、混乱を招き申し訳ありません) と "This is slow" div (別のブートストラップ アラート、今回は赤色) を、私のすべての AJAX イベントの読み込みの 3 秒後に表示します。サイト。

于 2012-09-16T13:38:29.043 に答える