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 是否已经完成，如果是，则不要费心显示面板，否则，显示它，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 毫秒后没有反应的 UI 确实感觉没有响应，所以我建议更早地显示模态。

于 2013-05-23T23:41:52.267 回答