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

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

我见过的常见解决方案是让 throbber 保持一两秒的状态，即使请求完成的速度比这更快。就像是：

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
});

显然，这会以牺牲美观为代价，让速度变慢，所以你是否愿意接受这种打击取决于具体情况。如果它是一直使用的东西，那么你最好接受丑陋的东西。如果这种情况每隔一段时间发生一次，用户就不会注意到额外的 5 亿英里。