Question

我有一个函数，使用$ .when调用了一些$ .ajax帖子，但是由于我在$ .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>

console.log（＆＃34; PostLoad＆＃34;）在任何其他函数之前触发，因此在它们完成之前就已经触及了它。我尝试用$ .ajax包装$ .when中的函数，但这并没有什么不同。

提前致谢

Answer 1

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

现在在ajax调用中添加一个beforeSend:function(){}部分，并在此全局变量w.dow.allAJAX中添加1。

在done()调用中用1减去数字并检查它是否为0.如果这样做意味着所有的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调用，那么只需创建window.allAJAX = 3 //（对于三个ajax调用）。现在简单地减去每个done（）。

Answer 2

应该是这样的：

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);
});

请进一步阅读jQuery .when的文档。

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

2 个答案: