Jquery 等待多个带有加载后动画的$.ajax调用完成

我有一个函数，在运行时使用$调用了一些$.ajax post，但是由于我在$.ajax asyn调用的成功返回中添加了一些加载延迟动画，所以它不会等待$.when中的那些

    <script>
    function tableOne() {
        $.ajax({
            url: "/cont/_ActionOne",
            type: "GET",
        })
         .done(function (partialViewResult) {
             var degree = 90;
             $(".type1").css("transform", "rotateY(" + degree + "deg)").delay(1250).queue(function () {
                 $("#tableOne").html(partialViewResult);
                 var degreex = 0;
                 $(".type1").css("transform", "rotateY(" + degreex + "deg)");
                 console.log("tableOne");
             })
         })
    }
</script>

<script>
    function tableTwo() {
        $.ajax({
            url: "/cont/_ActionTwo",
            type: "GET",
        })
         .done(function (partialViewResult) {
             var degree = 90;
             $(".type2").css("transform", "rotateY(" + degree + "deg)").delay(1250).queue(function () {
                 $("#tableTwo").html(partialViewResult);
                 var degreex = 0;
                 $(".type2").css("transform", "rotateY(" + degreex + "deg)");
                 console.log("TableTwo");
             })
         })
    }
</script>

<script>
    function tableThree() {
        $.ajax({
            url: "/cont/_ActionThree",
            type: "GET",
        })
         .done(function (partialViewResult) {
             var degree = 90;
             $(".type3").css("transform", "rotateY(" + degree + "deg)").delay(1250).queue(function () {
                 $("#tableThree").html(partialViewResult);
                 var degreex = 0;
                 $(".type3").css("transform", "rotateY(" + degreex + "deg)");
                 console.log("TableThree");
             })
         })
    }
</script>

<script type="text/javascript">
    $(document).ready(function () {
        $.when(tableOne(), tableTwo(), tableThree()).then(function () {
                console.log("PostLoad");
                $('.CheckBox').attr('disabled', false);
        })
    });
</script>

函数表一（）{
$.ajax({
url:“/cont/\u ActionOne”，
键入：“获取”，
})
.done（函数（partialViewResult）{
var度=90；
$（“.type1”）.css（“转换”、“旋转”（+degree+“deg”））.delay（1250）。队列（函数（）{
$（“#tableOne”）.html（partialViewResult）；
var degreex=0；
$（“.type1”）.css（“变换”、“旋转”（+degreex+“deg”））；
控制台日志（“表一”）；
})
})
}
函数表二（）{
$.ajax({
url:“/cont/\u ActionTwo”，
键入：“获取”，
})
.done（函数（partialViewResult）{
var度=90；
$（“.type2”）.css（“变换”、“旋转”（+degree+“deg”））.delay（1250）。队列（函数（）{
$（“#表二”）.html（partialViewResult）；
var degreex=0；
$（“.type2”）.css（“变换”、“旋转”（+degreex+“deg”））；
控制台日志（“表二”）；
})
})
}
函数表三（）{
$.ajax({
url:“/cont/_ActionThree”，
键入：“获取”，
})
.done（函数（partialViewResult）{
var度=90；
$（“.type3”）.css（“转换”、“旋转”（+degree+“deg”））.delay（1250）。队列（函数（）{
$（“#表三”）.html（partialViewResult）；
var degreex=0；
$（“.type3”）.css（“变换”、“旋转”（+degreex+“deg”））；
控制台日志（“表三”）；
})
})
}
$（文档）.ready（函数（）{
$.when（tableOne（）、tableTwo（）、tableThree（））。然后（函数（）{
控制台日志（“后加载”）；
$（'.CheckBox'）.attr（'disabled'，false）；
})
});

log（“PostLoad”）是在任何其他函数之前触发的，因此这是在它们完成之前触发的。我曾经尝试过使用$.ajax将函数包装到$.when中，但是没有什么不同

---

提前感谢

定义一个全局变量，如window.allAJAX=0

现在，在ajax调用中添加一个

beforeSend:function（）{}

部分，并在这个全局变量w.dow.allAJAX中添加1

在

done（）。如果这样做，则意味着您的所有ajax调用都已完成，并且您可以在所有ajax请求完成后执行希望执行的代码部分

例如：

window.allAJAX = 0;
function tableTwo() {
    $.ajax({
        url: "/cont/_ActionTwo",
        type: "GET",
        beforeSend:function(){
            window.allAJAX++;
        }
    })
     .done(function (partialViewResult) {
         var degree = 90;
         $(".type2").css("transform", "rotateY(" + degree + "deg)").delay(1250).queue(function () {
             $("#tableTwo").html(partialViewResult);
             var degreex = 0;
             $(".type2").css("transform", "rotateY(" + degreex + "deg)");
             console.log("TableTwo");
         })
         window.allAJAX --;
         if(window.allAJAX === 0){
            //CALL YOUR FUNCTION
         }
     })
}
function tableThree() {
    $.ajax({
        url: "/cont/_ActionThree",
        type: "GET",
        beforeSend:function(){
            window.allAJAX++;
        }
    })
     .done(function (partialViewResult) {
         var degree = 90;
         $(".type3").css("transform", "rotateY(" + degree + "deg)").delay(1250).queue(function () {
             $("#tableThree").html(partialViewResult);
             var degreex = 0;
             $(".type3").css("transform", "rotateY(" + degreex + "deg)");
             console.log("TableThree");
         })
         window.allAJAX --;
         if(window.allAJAX === 0){
            //CALL YOUR FUNCTION
         }
     })
}

或
如果您已经知道要进行多少ajax调用，只需make window.allAJAX=3/（对于三个ajax调用）。
现在，只需在每个done（）上进行减法即可。
应该是这样的：

function tableOne() {
    return $.ajax({
        url: "/cont/_ActionOne",
        type: "GET",
        success: function (partialViewResult) {
            var degree = 90;
            $(".type1").css("transform", "rotateY(" + degree + "deg)").delay(1250).queue(function () {
                $("#tableOne").html(partialViewResult);
                var degreex = 0;
                $(".type1").css("transform", "rotateY(" + degreex + "deg)");
                console.log("tableOne");
            });
        }
    });
}

....

$.when(tableOne(), tableTwo(), tableThree()).then(function () {
    console.log("PostLoad");
    $('.CheckBox').attr('disabled', false);
});

请进一步阅读的文档。
我明白了，所以您将动画代码放在了$.Ajax中？在$.中，对函数的调用何时应该包装在$.ajax中？（现在将测试您的建议）像
tableOne（）
这样的函数应该返回一个
延迟的
对象，例如
$.ajax（）
，当您将它们用作
$.when（）的参数时。你可以看看我的回答中已经提到的文档。我已经，在这里发布之前，尽我所能阅读了它。尝试按照您的建议将代码放在单独函数的$.ajax post中，但是$.when立即在when is finishe之前发布，我没有在$.ajax之前添加返回值。。。但它并没有完全起作用。5个中的2个在它到达之前完成。然后，其中3个仍在加载它似乎是随机的，有时一个完成，有时没有完成。