这就是我解决您提到的功能的方法

var loading;
    $("#loader").hide();
    jQuery.ajaxSetup({
        beforeSend: function() {
             loading= setTimeout("$('#loader').show()", 300);
        },
        complete: function(){
             clearTimeout(loading);
             $("#loader").hide();   
        },
        success: function() {
             alert("done");
        }
    });

这是一个老问题，但我发现了一个更好更优雅的方法。jQuery公开了一个变量$.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
});

显然，这是一个以牺牲美观为代价让事情变慢的权衡，所以你是否想承受这种打击取决于具体情况。如果是一直在使用的东西，你可能最好接受丑陋的东西。如果是偶尔发生的东西，用户不会注意到额外的500英里。

这应该行得通：

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

晚到这个线程，但认为这可能是有帮助的。Bootstrap v4.4.1目前在我的应用程序中使用。我有一个模态微调器定义如下：

<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>

我注意到的是，初始DIV中的“fade”类导致当它是一个快速运行的进程时，模态不会消失，正如最初的海报所指出的。可以将Bootstrap fade类修改为更短的过渡时间，但这对我来说也不总是有效。.ajaxStop也不一致，唯一一致的是删除了fade类。
希望能有所帮助。