javascript - 延迟进度指示器

我在布局页面中有以下代码，因此，每当发送Ajax请求时，它将显示一个progress-please-wait面板。

但我不确定该如何延迟。

$(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中检查其当前状态。

最佳答案

所以我想在setTimeout中，我必须检查当前的ajax是否已经完成，如果已经完成，则不必费心显示面板，否则，请显示它，而ajaxComplete稍后将其隐藏。但是，我不知道如何在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
});

或者，您可以将超时标识保存在变量中，并在显示模式之前在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;
});

顺便说一句，对我来说3s似乎很长。约200毫秒后没有响应的UI确实没有响应，因此建议您更早地显示该模式。

关于javascript - 延迟进度指示器，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/16725048/