The scrolling stuck during list update



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:


 <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>


$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++) {
     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++) {
                      count = i;
                count +=jump_load;
            } else {
                console.log('loadInloop contacts - finished');
        }, 500);

// init

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?



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


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


Your init has this :

// init

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

count +=jump_load;



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