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

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

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

这段代码对我来说非常好！

只有一个问题：

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

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

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

Answer 1

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

  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之前增加，在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 } });