如何使用异步在ajax加载中添加加载器：false

Question

我在使用 ajax 加载数据时遇到问题，我使用 async false 是因为我希望我的 ajax 进程首先运行。如果它不使用 async false 显示和数据将被堆叠。如何在ajax async false中显示我的加载程序？

我想添加我的装载机。这是我的装载机

$("#loading").show();

这是我更改时的选择事件

$('#boothFill').on('change', function () {

    if ($.fn.DataTable.isDataTable('#tbltransaction')) {

        $('#tbltransaction').DataTable().destroy();

    }

    $('#areaFill').find('.optArea').remove();

    $('#acamFill').find('.optAcam').remove();

    if ($("#boothFill").val() != "all") {

        $('#statisticData').find('.removeCardStat').remove();

        ajaxCardStatistic($('#dateStartTanggal').val(), $('#dateEndTanggal').val(), $('#areaFill').val(), $('#boothFill').val(), $('#acamFill').val(), $("#productFill").val());

    }else{

        $('#statisticData').find('.removeCardStat').remove();

    }

    ajaxArea($('#boothFill').val(), $('#acamFill').val());

    ajaxAcam($('#areaFill').val(), $('#boothFill').val());

    ajaxGet($('#dateStartTanggal').val(), $('#dateEndTanggal').val(), $('#areaFill').val(), $('#boothFill').val(), $('#acamFill').val(), $("#productFill").val(), $("#productTypeFill").val());      getAllData($('#dateStartTanggal').val(), $('#dateEndTanggal').val(), $('#areaFill').val(), $('#boothFill').val(), $('#acamFill').val());

});

这是选择更改时调用的函数

function ajaxCardStatistic(dateStartTanggal, dateEndTanggal, area, booth, acam, product){

    $.ajax({

        type: "POST",

        url: "dashboard/statisticCard",

        data: {

            dateStart : dateStartTanggal,

            dateEnd : dateEndTanggal,

            area : area,

            booth : booth,

            acam : acam,

            product : product,

        },

        }

    });

}