我在我的jQuery代码中使用以下模拟来展示加载动画，以显示在进行AJAX请求时:
jQuery.ajaxSetup({
beforeSend: function() {
$('#loader').show()
},
complete: function(){
$('#loader').hide()
},
success: function() {
$('#loader').hide()
}
});
这段代码对我来说完全正常运行！
只有一个问题：
一些请求非常简单且快速，因此加载旋转图标仅显示了几毫秒。当然这不是很美观。
所以我尝试使用setTimeout()稍微延迟显示加载旋转器。我希望它只在AJAX请求需要至少100毫秒时才弹出，但它没有起作用。
因此，我需要一些代码来延迟加载旋转器，如上所述，因此它只在执行“更长时间”的AJAX请求时弹出！
这是我解决你提到的功能的方法。
var loading;
$("#loader").hide();
jQuery.ajaxSetup({
beforeSend: function() {
loading= setTimeout("$('#loader').show()", 300);
},
complete: function(){
clearTimeout(loading);
$("#loader").hide();
},
success: function() {
alert("done");
}
});
$.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() : '';
});
我看到的常见解决方案是，即使请求比这个时间更快地完成，也要将 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
});
这应该可以工作：
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
}
});
如果您同时发送多个请求，现在需要稍微改进一下，但希望您能明白。
现在回复，因为我遇到了同样的问题，这些答案给了我部分解决方案。 为了避免在ajax请求完成后启动spinner，因为超时时间比执行脚本更长，你需要进行一个上/下标志检查，这很简单，对我很有效。
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
}
});
<div class="modal-spinner modal fade" id="loadingModal" tabindex="-1" role="dialog" style="display:none;">
<div class="modal-dialog modal-dialog-centered justify-content-center" role="document">
<div role="status" style="width: 48px">
<span class="fa-solid fa-spinner fa-spin fa-4x"></span>
</div>
</div>
</div>