Javascript jQueryAjax完成时调用函数

我想在加载并显示引导对话框后调用我的函数loadTest

$(".btn").on("click", function() {
    $.ajax({
        type: "POST",
        url: '/echo/html/',
        data: {
            html: '',
            delay: 0.1
        },
        success: function(data) {
            $('body').append('<div id="test_modal_wrapper"></div>');
            $('#test_modal_wrapper').html(data);
            $("#modal").modal({backdrop: 'static'});

            $('#modal').on('hidden.bs.modal', function() {
                $('#test_modal_wrapper').remove();
            });
            loadTest(1, 3);
            loadTest(2, 2);
            loadTest(3, 1);
        }
    });
});

function loadTest(id, delay) {
    $.ajax({
        type: "POST",
        url: '/echo/html/',
        async: false,
        data: {
            html: '<div class="test-case"><h5>Testing connection '+ id +'</h5></div>',
            delay: delay
        },
        success: function(data) {
            $('.modal-body').append(data);
        }
    });
}

问题是该对话框等待所有调用loadTest完成，然后显示包含loadTest函数结果的对话框

我想要的是首先加载对话框，然后加载测试，这很神奇

如果要将负载测试推迟到打开modal，请使用所示的.bs.modal事件：

---

尝试删除async:False为什么对所有AJAX请求使用相同的url？“/echo/html/”是实际的URL还是占位符？每个函数调用的URL都不同。我认为loadTest是在对话框之后加载的。我看到小提琴和工作根据您的需要。现在问题是什么？@adeneo，我想按顺序加载函数调用

 $('#modal').on('shown.bs.modal', function() {
        loadTest(1, 3);
        loadTest(2, 2);
        loadTest(3, 1);
 });