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

Question

I have a problem in load data using ajax, I use async false because I want my ajax process to run first. if it doesn't use async false the display and data will be stacked. how to show my loader in ajax async false?

Iwant to add my loader. this is my loader

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

This is my select event when change

$('#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());
});

this is a function called when select change

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,
        },
        dataType: "JSON",
        async: false,
        success: function (response) {
            $.each(response.data, function(item, data){
                if (!$.trim(data.product_type_name)) {
                    var html = "<div class='col-12 col-sm-6 col-lg-3 removeCardStat'><div class='card'><div class='card-header'><h4>" + data.motoquick_name + " (" + data.jenis + ")</h4></div>";
                }else{
                    var html = "<div class='col-12 col-sm-6 col-lg-3 removeCardStat'><div class='card'><div class='card-header'><h4>" + data.motoquick_name + " (" + data.jenis + " > " + data.product_type_name + ")</h4></div>";
                }
                html += "<div class='card-body' style='padding-top: 10px;padding-bottom: 10px;'><div class='row text-center'>";
                html += "<div class='col-lg-6 col-md-6 col-sm-12 col-12'><h4>" + data.transaction + "</h4><span>Trx</span></div>";
                html += "<div class='col-lg-6 col-md-6 col-sm-12 col-12'><h4>" + (data.rate*100).toFixed(0) + "% </h4><span>Avg/Day</span></div>";
                html += "</div></div>";
                html += "<div class='card-footer text-center'>" + rupiah(data.revenue) + " <br><span>Revenue</span></div>";
                html += "</div></div>";
                $("#statisticData").append(html);
            });
        }
    });
}

Answer 1

You can use 

beforeSend: function() {

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


Example
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, 
                },
                dataType: "JSON",
                beforeSend: function() {

                        $("#loading").show();
                        },
                success: function (response) {
                    $.each(response.data, function(item, data){
                        if (!$.trim(data.product_type_name)) {
                            var html = "<div class='col-12 col-sm-6 col-lg-3 removeCardStat'><div class='card'><div class='card-header'><h4>" + data.motoquick_name + " (" + data.jenis + ")</h4></div>";
                        }else{
                            var html = "<div class='col-12 col-sm-6 col-lg-3 removeCardStat'><div class='card'><div class='card-header'><h4>" + data.motoquick_name + " (" + data.jenis + " > " + data.product_type_name + ")</h4></div>";
                        }
                        html += "<div class='card-body' style='padding-top: 10px;padding-bottom: 10px;'><div class='row text-center'>";
                        html += "<div class='col-lg-6 col-md-6 col-sm-12 col-12'><h4>" + data.transaction + "</h4><span>Trx</span></div>";
                        html += "<div class='col-lg-6 col-md-6 col-sm-12 col-12'><h4>" + (data.rate*100).toFixed(0) + "% </h4><span>Avg/Day</span></div>";
                        html += "</div></div>";
                        html += "<div class='card-footer text-center'>" + rupiah(data.revenue) + " <br><span>Revenue</span></div>";
                        html += "</div></div>";
                        $("#statisticData").append(html);
                    });
                 $("#loading").hide();
                }
            });
        }

Answer 2

Just put ajax before in loader like this In your code dataType: "JSON", after

beforeSend: function() {
   $("#loader").show();
},

After success in hide this loader like this

$("#loader").hide();

Thanks

Answer 3

This will work.Do show first and wrap your async:false ajax into a setTimeout.

$("#loading").show();
setTimeout(function(){
 $.ajax({....async: false,});
},500);