所有ajax调用的通用ajax加载器

如何解决所有ajax调用的通用ajax加载器

这可能之前已经讨论过，但我没有找到任何正确或有效的答案。 我想要一个通用的 ajax 加载器，它在每次 ajax 调用时显示加载器 gif/动画。 现在的问题是，如果同时发出两个 ajax 请求（在实际场景中可能有十几个 ajax 调用同时运行）如果第一个 ajax 请求首先完成，它将关闭加载 gif 但第二个请求仍在运行.. 有什么方法可以确保在通用 ajax 函数中仅在当前没有 ajax 请求处理的情况下关闭加载器 gif/动画？

function CallMethod(url,parameters,successCallback) {
                //show loading... image

                $.ajax({
                    type: 'POST',url: url,data: JSON.stringify(parameters),contentType: 'application/json;',dataType: 'json',success: successCallback,error: function(xhr,textStatus,errorThrown) {
                        console.log('error');
                    }
                });
            }

CallMethod(url,pars,onSuccess);

function onSuccess(param) {
    //remove loading... image
    //do something with the response
}

这是我已经在此链接上看到的代码 jquery - creating a generic ajax function

解决方法

借助全局变量和显示/隐藏加载图像的加载器方法，可以跟踪通过通用 ajax 方法启动的活动 ajax 调用。

// GLobal Variable to keep track ajax requests through ajax
var totalAjaxCalls = 0;
function loader(flag) {
    if (flag) {
        if (totalAjaxCalls == 0) {
            // Show Loader
        }
        totalAjaxCalls++;
    } else {
        totalAjaxCalls--;
        if (totalAjaxCalls == 0) {
            // Hide Loader
        }
    }
}
function CallMethod(url,parameters,successCallback) {
    loader(true); // << Show Loader
    $.ajax({
        type: 'POST',url: url,data: JSON.stringify(parameters),contentType: 'application/json;',dataType: 'json',success: function(data,textStatus,jqXHR) {
            loader(false); // << Hide Loader
            successCallback(data,jqXHR)
        },error: function(xhr,errorThrown) {
            loader(false); // << Hide Loader
            console.log('error');
        }
    });
}