延迟进度指示器

Delaying progress indicator

本文关键字：指示器 延迟      更新时间：2023-09-26

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

所以我猜在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;
});
顺便说一句，3秒对我来说太长了。如果UI在200毫秒后还没有反应，那就会让人感觉没有反应，所以我建议更早地显示模态。
相关文章：