Question

我正在使用以下模型在我的jQuery代码中执行AJAX请求时显示我的加载微调器：

jQuery.ajaxSetup({
beforeSend: function() {
    $('#loader').show()
},
complete: function(){
    $('#loader').hide()
},
success: function() {
    $('#loader').hide()
}
});

这段代码对我来说非常合适！

只有一个问题：

有些请求非常简单快速，因此加载微调器只显示了几毫秒。那当然不是很漂亮。

所以我尝试使用setTimeout()来显示稍微延迟的加载微调器。我希望它只在AJAX请求至少占用时弹出，比方说100ms，但它不起作用。

所以我需要一些代码来延迟加载微调器，正如我上面所解释的那样，所以它只会在执行“更长时间”的AJAX请求时弹出！

Answer 1

这就是我解决你提到的功能的方法

    var loading;
    $("#loader").hide();
    jQuery.ajaxSetup({
        beforeSend: function() {
             loading= setTimeout("$('#loader').show()", 300);
        },
        complete: function(){
             clearTimeout(loading);
             $("#loader").hide();   
        },
        success: function() {
             alert("done");
        }
    });

Answer 2

这是一个老问题，但我找到了一个更好，更优雅的方法。 jQuery公开了一个变量$.active，它是当前活动的ajax请求的数量。其值在ajaxSend之前增加，在ajaxComplete之后减少。

考虑到这一点，我们需要做的就是在ajaxSend被触发时显示微调器$.active == '1'并在ajaxComplete被触发时隐藏微调器$.active == '1'。这是我目前正在完美运作的代码。

$(document).ajaxSend(function(event, request, settings) {
    $.active == '1' ? $('#spinner').show() : '';
});

$(document).ajaxComplete(function(event, request, settings) {
    $.active == '1' ? $('#spinner').hide() : '';
});

希望这有助于某人。

Answer 3

我已经看到的常见解决方案是保持悸动一两秒钟，即使请求完成得比这更快。类似的东西：

var loaded = false;
var throbbed = false;

function checkComplete(){
    if(loaded && throbbed){
        $("#loader").hide();
    }
}

function requestComplete(){
    loaded = true;
    checkComplete();
}

jQuery.ajaxSetup({
beforeSend: function() {
    $('#loader').show();
    setTimeout(function(){
        throbbed = true;
        checkComplete();
    }, 500);

},
complete: requestComplete,
success: requestComplete
});

显然，这有一个权衡，即以牺牲美观为代价使事情变得更慢，所以无论你是否愿意接受这种打击，它都依赖于案例。如果它是一直被使用的东西，你可能最好接受丑陋。如果这种情况每隔一段时间发生一次，用户就不会注意到额外的500密耳。

Answer 4

这应该有效：

var timeout;

jQuery.ajaxSetup({
beforeSend: function() {
    timeout = window.setTimeout(function() {
        timeout = null;
        $('#loader').show();
    }, 100);
},
complete: function(){
    if (timeout) {
        window.clearTimeout(timeout);
        timeout = null;
    }
    $('#loader').hide()
},
success: function() {
    // No need to do anything here since complete always will be called
}
});

如果您同时发出多个请求，现在需要对此进行一些改进，但希望您能了解到这一点。

Answer 5

现在回复，因为我遇到了同样的问题，这些答案给了我一部分解决方案。为了避免在ajax请求完成后启动微调器，因为超时时间比执行脚本要宽，你需要上/下标志检查，非常简单，对我有用。

var m = $('.modal-ajax');
var run = false; // global scope is necessary
m.hide(); // if isn't hidden in css

jQuery.ajaxSetup({
    beforeSend: function() {
        run = true; // up flag          
        d = setTimeout(function(){
            if(run) // is ajax executing now?
                m.show();
        },100); // is trigged only for NO fast response
    },
    complete: function(){
        m.hide();
        run = false; // down flag                
    },
    success: function() {            
  //  do stuff
    }
});

在jQuery中执行ajax请求时延迟加载微调器

5 个答案: