内部的Ajax调用for循环

Question

如何在for循环中正确显示和隐藏ajax加载器以及ajax调用。

$scope.upload = function(){
    $(".loader").show();
     for(var i=0;i<count ;i++){
     $.ajax({
               type: "POST",
               url: "/upload",
               data: data;
               contentType : 'multipart/form-data',
               success: function(msg){

                 }); 
               }
             });
}

}

Answer 1

一种选择是检查所有ajax调用何时完成：

$scope.upload = function(){
    $(".loader").show();
    var calls = [];
     for(var i=0;i<count ;i++){
     calls[i] = $.ajax({
                   type: "POST",
                   url: "/upload",
                   data: data;
                   contentType : 'multipart/form-data',
                   success: function(msg){

                   }); 

             });
    }
    Promisse.all(calls).then(function(data){
        $(".loader").hide();
    });
}

Answer 2

试试这样：

$(".loader").show();
var counterFlag =0;
 for (var i = 0; i < count; i++){
    $.ajax({
            //ajax options
            success: function(msg){

            },
            complete:function(d){
                counterFlag++;
                if(counterFlag==count)
                {
                    $(".loader").hide();
                }
            });
    }
  }