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

所以我想在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
});

或者，您可以将超时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;
});

不过，3s对我来说似乎很长。在200毫秒后没有反应的用户界面确实没有反应，因此我建议更早地显示模态。

延迟进度指示器

1 个答案: