0

レイアウト ページに次のコードがあるため、Ajax リクエストが送信されるたびに、進行状況を確認するパネルが表示されます。

しかし、それを遅らせる方法がわかりません。

$(document).ajaxStart(function (event, XMLHttpRequest, ajaxOptions) {
    $('#wait').modal('show');
});

$(document).ajaxComplete(function (event, jqXHR, ajaxOptions) {
    $('#wait').modal('hide');
});

私は試した：

$(document).ajaxStart(function (event, XMLHttpRequest, ajaxOptions) {
    setTimeout("$('#wait').modal('show')", 3000);
});

ただし、リクエストにかかる時間が 3000 ミリ秒未満の場合、進行中のインジケーターが表示さajaxCompleteれ、それまでに既に完了しているため、消えることはありません。

だから私はsetTimeout、現在の ajax が既に完了しているかどうかを確認する必要があると思います。そうであれば、パネルを表示する必要はありませんajaxComplete。ただし、 で現在のステータスを確認する方法がわかりませんajaxStart。

4

1 に答える 1

2

したがって、setTimeout で推測すると、現在の ajax が既に完了しているかどうかを確認する必要があります。そうであれば、わざわざパネルを表示しないでください。ただし、ajaxStart で現在のステータスを確認する方法がわかりません。

そのための単純なブール値フラグを作成します。

var isLoading = false;
$(document).ajaxStart(function (event, XMLHttpRequest, ajaxOptions) {
    isLoading = true;
    setTimeout(function() {
        if (isLoading)
            $('#wait').modal('show');
    }, 3000);
});
$(document).ajaxComplete(function (event, jqXHR, ajaxOptions) {
    isLoading = false;
    $('#wait').modal('hide'); // won't do any harm if already hidden
});

または、タイムアウト ID を変数に保存し、モーダルが表示される前に ajax が完了したときにそれをクリアすることもできます。

var timer = null;
$(document).ajaxStart(function (event, XMLHttpRequest, ajaxOptions) {
    if (timer)
        return; // when multiple requests are sent at same time
    timer = setTimeout(function() {
        timer = null;
        $('#wait').modal('show');
    }, 3000);
});
$(document).ajaxComplete(function (event, jqXHR, ajaxOptions) {
    if (timer)
        clearTimeout(timer);
    else
        $('#wait').modal('hide');
    timer = null;
});

ところで、私には 3 が非常に長いように見えます。~200 ミリ秒後に反応しない UI は無反応に感じられるため、モーダルをもっと早く表示することをお勧めします。

于 2013-05-23T23:41:52.267 に答える