如何使用異步在 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,
        },
        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

只需將 ajax 放在像這樣的加載器中 在您的代碼dataType: "JSON", after

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

像這樣隱藏這個加載器成功后

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

謝謝

Answer 3

這將起作用。首先顯示並將您的 async:false ajax 包裝到 setTimeout 中。

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