Javascript 显示加载gif，直到ajax调用加载完毕（且不与setInterval交互）

我的javascript部分中有一个ajax调用，它从数据库中收集一些数据。我注意到这个过程大约需要16秒才能完成（我知道它对于数据库调用来说太长了，一些问题需要通过查询来解决），所以我需要一些临时的东西，比如表示加载的gif。这里的许多指南和线程介绍了如何在html中执行此操作，但由于这是在我的ajax调用中发生的，我如何执行此操作而不与更新金字塔的setInterval交互

function Plugin(element, options) {
    var ajaxTest = function(source) {
        $.ajax({
            url : "pyramidList",
            type : "GET",
            dataType : "json",
            data : {
                source : source
            },
            success : function(response) {
                var arrayBlock = [];
                var source1;
                for (var i = 0; i < response.length; i++) {

                    var block = {};
                    source1 = parseInt(response[i].source);
                    block.level = parseInt(response[i].level, 10);
                    block.width = parseFloat(response[i].width);
                    block.position = parseInt(response[i].position, 10);

                    block.name = response[i].superCategory.toString();
                    block.colour = response[i].statusColor.toString(); // colour
                    arrayBlock.push(block);
                }

                Plugin.prototype.init(source1);
                Plugin.prototype.render(arrayBlock);


            },
            Error : function() {
                alert("Error: loading the Pyramid");
            }
        });

    };
    Plugin.prototype.element = $(element);

    // jQuery has an extend method that merges the
    // contents of two or more objects, storing the
    // result in the first object. The first object
    // is generally empty because we don't want to alter
    // the default options for future instances of the plugin
    Plugin.prototype.options = $.extend({}, defaults, options);

    Plugin.prototype._defaults = defaults;
    Plugin.prototype._name = pluginName;

    ajaxTest(options.source);
    setInterval(ajaxTest, 15000);
}

函数插件（元素、选项）{
var ajaxTest=函数（源）{
$.ajax({
url:“金字塔列表”，
键入：“获取”，
数据类型：“json”，
数据：{
资料来源：资料来源
},
成功：功能（响应）{
var arrayBlock=[]；
var源1；
对于（变量i=0；i

致以最诚挚的问候，

$.ajax({
$.ajax({
    url : "pyramidList",
    type : "GET",
    dataType : "json",
    data : {
        source : source
    },
    beforeSend: function() {    <<< Add this function
        //show loader.gif
    },
    success : function() {

    },
    complete: function() {
        //hide loader.gif
    }
});

url:“金字塔列表”，
键入：“获取”，
数据类型：“json”，
数据：{
资料来源：资料来源
},
beforeSend:function（）{对您的场景使用一点HTML会有所帮助。如果没有它，我只能预测

<div id="main-container">
<div class="container">
    <div class="your-data"></div>
    <div class="your-data"></div>
    .....
</div>
<div class="loading" style="display: none">{{your gif}}</div>
</div>

只需在页面上放置一个带有
display:none
的动画。然后，将
$（yourEl）.show（）
放在
$.ajax（…）
行之前，并将
$（yourEl.hide（）
作为成功处理程序的第一行。
$.ajax({
   beforeSend: function() {
       $('#main-container .loading').show();
   },
   success: function(response) {
       $('#main-container .loading').hide();
       .....
   }
});