javascript - 延迟进度指示器

Question

我的布局页面中有以下代码，因此每当发送 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 中检查其当前状态。

Answer 1

So I guess in the setTimeout, I have to check if the current ajax is already done, if it is, then do not bother to show the panel, else, show it and ajaxComplete will hide it later. However, I do not know how to check for its current status in ajaxStart.

为其创建一个简单的 bool 标志。

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 确实感觉没有响应，所以我建议更早地显示模式。