模式不显示在ajax之前

Question

我在点击事件上有一个Javascript，它会循环所有的json，用ajax将它存储到数据库，之前我已经在循环运行之前添加了一些模式到弹出窗口。但问题是模式在循环运行之前没有弹出，并在循环运行后弹出这是我的代码 这是我的javascript

            $.fn.dataTable.ext.buttons.Mapping = {
                text: 'Save To Database',
                action: function (e, dt, node, config) {

                    $('#modal-respondent-upload').modal('show');
                    var filename = $("#xlf").val().replace("C:\\fakepath\\", "");

                    var obj = jQuery.parseJSON(output);
                    $.each(obj.hasil, function (key, value) {
                        var dataRespondent = {
                            json: JSON.stringify(value),
                            importSessionDataID: 1
                        }
                        console.log(dataRespondent);
                        var respondentID = simpleAjaxRequest(dataRespondent, "/UploadExcel/CreateRespondent/", "Import Respondent Data");
                    });                    
                }
            };

function simpleAjaxRequest(data, url, text) {
    var id = 0;
    $.ajax({
        type: 'POST',
        url: url,
        data: data,
        async: false,
        success: function (data) {
            //moveProgressBar(10, text);
            id = data;
        }

    });
    return id;
}

我的模态就像这样

<div class="modal fade" role="dialog" id="modal-respondent-upload">
    <div class="modal-dialog">
        <div class="modal-content">
            <h1><span id="kondisi-data-modal">0</span>/<span id="jumlah-data-modal">0</span></h1>
        </div>
    </div>
</div>