The scrolling stuck during list update

ionic-v1
1

Hello,

I have Contacts list 320 elements.

On start I load only 20 contacts and after run in recursion to load all other 300 with timeout of 500 milliseconds.

Here is relevant code:

HTML

 <a bindonce ng-repeat="pet in visible_contacts" 
             class="item item-avatar item-icon-right">
           <img bo-src="'img/default.png'">
            <h2>{{ pet.displayName }}</h2>
            <h4>{{ pet.emails }}</h4>
            <i class="icon ion-checkmark" style="margin-right: 5%"></i>
          </a>

JS

$scope.new_contacts = ContactsService.getAllContacts();
    $scope.visible_contacts = [];
    
    var count = 0;
    var jump_load = 20;
    
    
    $scope.loadpart = function () {   
         //fill visible_groups on start
        for (var i = 0; i < jump_load; i++) {
           $scope.visible_contacts.push($scope.new_contacts[i]);
           count++;
         };  
    };
  
     var stop;
    $scope.loadInloop = function () {        

        stop = $timeout(function () {
            if ($scope.visible_contacts.length < $scope.new_contacts.length) {
                
                for (var i = count; i < (count+jump_load); i++) {
                  if(i<$scope.new_contacts.length){
                      $scope.visible_contacts.push($scope.new_contacts[i]);                         
                  }  
                  else{
                      count = i;
                      return;
                  }
               };                
                
                count +=jump_load;
                
                $scope.loadInloop();
            } else {
                console.log('loadInloop contacts - finished');
                $timeout.cancel(stop);
            }
        }, 500);
    };

// init
 $scope.loadpart();    
 $scope.loadInloop();

In Chrome it works as expected and I can scroll during the load (a.e. timeout recursion) but on real device (Android Nexus 4) the scrolling is stuck till load finish aka reach: $timeout.cancel(stop);.

Do I miss something?

Thanks,

2

Why are you running $scope.loadInloop(); twice?

3

its not twice. First time i call loadInloop at the end of example. After, i run recursion where each run adds 20 items to $scope.visible_contacts

4

Your init has this :

// init
 $scope.loadpart();    
 $scope.loadInloop();

Then, inside the $scope.loadInloop method, you have :

count +=jump_load;

$scope.loadInloop();
5

Right, its like count down algorithm. See example in Fiddle. this is a way to handle delay per loop.