javascript - 显示加载 gif 直到 ajax 调用加载完毕(并且不与 setInterval 交互)

Question

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

最诚挚的问候，

Answer 1

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