Javascript 在最短时间后调用函数

我试图在等待Ajax请求时显示微调器。 请求时间确实是随机的。有时需要2秒以上的时间。这很好，因为用户可以看到微调器。 问题是请求需要几百毫秒。用户无法看到微调器，因为它显示和隐藏速度很快

我在考虑用2秒钟从

setTimeout

调用Ajax请求。但这不是一个好主意，因为如果Ajax请求需要3秒，例如，微调器将显示5秒而不是3秒

如何实现此场景：

如果Ajax请求花费的时间少于2秒，则在2秒后隐藏微调器

如果Ajax请求耗时超过2秒，则在Ajax请求完成后隐藏微调器

---

我确实做过这件事。：-）

我的做法是这样的（伪代码）：

我使用这个（我的加载器是纯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）（在100毫秒后开始显示，如果超过100毫秒则从不显示，在100毫秒到900毫秒之间从0%褪色到100%不透明度，并且在请求完成后始终隐藏（即使失败）。 如果装载机非常快，不要显示它。 添加淡色是伟大的，而不是弹出加载程序的地方

#加载器是一个居中位置：absolute div id=“loader”，在我的projet中有一个css加载器，但您可以将它放在您想要的地方

漂亮的css加载程序：

---

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

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对象的替代方案（感谢） 对于最新的浏览器（不是IE），您也可以使用本机promise以获得更好的性能

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

---

您想分享任何代码吗？为什么要添加人工延迟？当然没有延迟（因此没有微调器）更可取？我想让用户知道我正在处理他的请求。只是给user@Mhd：我已经这样做了（虽然我只想了大约一秒钟），所以用户不会得到奇怪的随机闪光（旋转器）在它消失之前，他们没有时间正确地查看或理解。@t.J.Crowder这正是我需要它2秒钟的原因。Ajax可能需要2到3秒钟，这取决于后端服务器上的负载。因此，使用2000硬编码超时将不起作用。@himanshhuupadhyay：我建议重新阅读这个问题（以及答案）。OP明确表示，如果ajax只需不到两秒钟，他们希望微调器保持旋转整整两秒钟。但如果它运行更长，他们希望它保持旋转更长时间。这就是上面所说的。Ohk。明白了。你是对的。我收回我的答案。哦，我喜欢。它仍然使用旗帜，就像我的一样，它们只是在承诺——因此是可组合的，等等（事实上，上次我不得不这么做的时候，我想我做了……这个。）可能值得展示原生承诺版本。@T.J.Crowder我还不习惯原生承诺版本。我知道！我想没有意愿……它会这样使用吗（）或者我遗漏了什么？这很有效，但我会使用

Promise。如果你愿意，你可以直接将
resolve
传递到
setTimeout
中：嗯，这看起来不错。将解析传递为
setTimeout
回调是个好主意，机智。我打赌我们也可以使用
XMLHttpRequest
作为承诺，对吧？我会的ep
$.ajax
在示例中，因为它更简单。：-，我们可以使用，是的。但这是一个jQuery问题，我们没有必要走得太远。。。（您最初的纯jQuery答案没有任何问题。）虽然延迟这是一个很好的建议（事实上，这是我在评论中提出的），但这并不能回答OP的问题——它会在ajax调用完成后立即删除微调器/加载器，即使只需一秒钟。
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' );
});