Question

我正在尝试在等待Ajax请求时显示一个微调器。请求时间非常随机。有时需要2秒多。这很好，因为用户可以看到微调器。问题是请求需要几百毫秒。用户无法快速查看显示和隐藏的微调器。

我在考虑从setTimeout调用Ajax请求2秒。但是，这不是一个好主意，好像Ajax请求需要3秒，例如，微调器将显示5秒而不是3秒。

我如何实现这种情况：

如果Ajax请求少于2秒
在Ajax请求完成后隐藏微调器，如果Ajax请求超过2秒

Answer 1

你的问题可以通过承诺解决。

var timer_deferred = $.Deferred();
var ajax = $.ajax( {
    url : '/echo/html'
} );

setTimeout( function(){ timer_deferred.resolve() }, 2000 );

$.when( timer_deferred, ajax ).done( function(){
    alert( 'Hide Spinner' );
} );

when将等到两个承诺都完成。因此，如果ajax调用首先完成，它仍将等待2秒。

我还建议您不要等待2秒，而应添加一个指示AJAX完成的指示。

这是使用本机Promise对象的替代方法（感谢T.J Crowder）

对于最近的浏览器（不是I.E），您可以使用原生承诺以获得更好的性能。

var timer_promise = new Promise(function(resolve) {
    setTimeout(resolve, 2000);
});

var ajax = $.ajax({
    url : '/echo/html'
});

Promise.all([timer_promise, ajax]).then(function(){
    alert( 'Hide Spinner' );
});

Answer 2

我做到了这一点。： - ）

我这样做的方式是沿着这些线（伪代码）：

var runningLong = false;
var ajaxComplete = false;
setTimeout(function() {
    if (ajaxComplete) {
        // Stop spinning
        spinning = false;
    } else {
        runningLong = true;
    }
}, 2000);
$.ajax({
    // ...
    success: function() {
        ajaxComplete = true;
        if (runningLong) {
            // Stop spinning
        }
    }
});

Answer 3

我使用它（我的装载机是纯粹的css），我认为这对你来说是一个非常好的解决方案：

    //loader start
    $('#loader').delay(100).fadeIn(800);

    $.ajax('/ajax',{    
        ...
    }).fail(function(xhr,txt,e){
       ...
    }).always(function(){
        //loader stop and hide on ajax callback (success or error)
        $('#loader').stop(true,true).hide();
    });

您可以调整两个值（100和800）（开始在100ms后显示，如果超过100ms从未显示，在100ms 900ms之间从0％淡化到100％不透明度，并在请求完成后始终隐藏（即使它失败）。如果装载机速度非常快，请不要显示装载机。添加淡入淡出很棒，而不是在某处弹出一个装载器！

#loader是一个居中的位置：绝对div id =＆＃34; loader＆＃34;在我的项目中使用css加载器，但你可以把它放在你想要的地方。

好的css加载器：

http://tobiasahlin.com/spinkit/

https://codepen.io/collection/HtAne/

最短时间后调用功能

3 个答案:

这是使用本机Promise对象的替代方法（感谢T.J Crowder）