如何解决AG Grid级联下拉引发的多加载器闪烁问题

我们此前将AJAX请求的加载器显隐逻辑统一移至_Layout.cshtml，通过ajaxStart和ajaxStop全局控制，但遇到了新问题：带有级联下拉框的AG Grid在执行保存操作时，会批量加载所有下拉列数据，导致加载器多次闪烁。我们希望在所有下拉数据加载过程中仅显示一次加载器，且无需在各页面单独处理该逻辑。

现有实现代码：

$(document).ready(function () {
    $(document).ajaxStart(function () {
        debugger;
        $("#cover-spin").fadeIn(50);
    });
    $(document).ajaxStop(function () {
        debugger;
        $("#cover-spin").fadeOut("slow");
    });
});

可行方案 #

1. 全局请求计数器 + 延迟隐藏策略 #

通过维护全局AJAX请求计数器，仅在第一个请求发起时显示加载器；隐藏时设置延迟，确保批量请求全部发起后再执行隐藏操作，避免频繁切换。

修改后的代码：

$(document).ready(function () {
    let ajaxRequestCount = 0;
    let hideLoaderTimeout;

    $(document).ajaxStart(function () {
        ajaxRequestCount++;
        // 仅第一个请求触发时显示加载器
        if (ajaxRequestCount === 1) {
            $("#cover-spin").fadeIn(50);
        }
        // 清除之前的延迟隐藏定时器
        clearTimeout(hideLoaderTimeout);
    });

    $(document).ajaxStop(function () {
        ajaxRequestCount--;
        // 延迟执行隐藏，避免批量请求导致的闪烁（时间可根据实际请求间隔调整）
        hideLoaderTimeout = setTimeout(function () {
            if (ajaxRequestCount === 0) {
                $("#cover-spin").fadeOut("slow");
            }
        }, 300);
    });
});

2. 针对AG Grid下拉请求精准控制 #

如果能通过请求URL、参数等特征识别AG Grid的下拉请求，可以单独对这类请求合并加载状态，忽略单个请求的显隐触发，只在首个下拉请求发起时显示，最后一个完成时隐藏。

示例代码（假设AG Grid下拉请求URL包含/api/dropdown）：

$(document).ready(function () {
    let dropdownRequestCount = 0;
    let isLoaderShown = false;

    $(document).ajaxSend(function(event, jqxhr, settings) {
        // 判断是否为AG Grid下拉请求
        if (settings.url.includes("/api/dropdown")) {
            dropdownRequestCount++;
            if (dropdownRequestCount === 1 && !isLoaderShown) {
                $("#cover-spin").fadeIn(50);
                isLoaderShown = true;
            }
        } else {
            // 非下拉请求按原有逻辑处理
            if (!isLoaderShown) {
                $("#cover-spin").fadeIn(50);
                isLoaderShown = true;
            }
        }
    });

    $(document).ajaxComplete(function(event, jqxhr, settings) {
        if (settings.url.includes("/api/dropdown")) {
            dropdownRequestCount--;
            // 所有下拉请求完成且无其他AJAX请求时隐藏
            if (dropdownRequestCount === 0 && $.active === 0) {
                $("#cover-spin").fadeOut("slow");
                isLoaderShown = false;
            }
        } else {
            // 非下拉请求全部完成时隐藏
            if ($.active === 0) {
                $("#cover-spin").fadeOut("slow");
                isLoaderShown = false;
            }
        }
    });
});

方案说明 #

• 第一种方案通用性强，无需识别特定请求类型，通过计数器和延迟处理即可解决批量请求导致的闪烁问题，适合大多数场景。
• 第二种方案更精准，针对AG Grid下拉请求单独控制，适合能明确区分请求类型的场景。

内容的提问来源于stack exchange，提问作者N2J