Infinite Scroll calls twice

ionic-v1
1

Hi,
I am using Infinite Scroll below an ion-list. My problem is, that the loadMore function is called twice. I just cant figure out why…

View:

<ion-list>
...
</ion-list>
<ion-infinite-scroll
            ng-if="moreData"
            on-infinite="loadMore()"
            distance="5%" >
</ion-infinite-scroll>

Controller:

...
$scope.loadMore = function() {
                $scope.moreData = false;
                productService.getMatches(limit, offset).then(function(matches) {
                    if (matches.length > 0) {
                        $scope.products = $scope.products.concat(matches);
                        offset += limit;
                        $scope.moreData = true;
                    }
                    $scope.$broadcast('scroll.infiniteScrollComplete');
                });
            };

productService.getMatches(…) is a Http-Request.

Someone knows the problem?

2

When is it called twice, on page load? there’s also a strange bug with pull to refresh that keeps firing if the event hasn’t ended before you leave the view as described in this issue https://github.com/driftyco/ionic/issues/2771

i also had that it was called twice on page load so i set up a boolean to check if it was allready fired code sample:

$scope.inProgress = false;
$scope.loadMoreMensen = function(){ 
		if(!$scope.inProgress){
			$scope.inProgress = true;
			ItemService.getMoreVolgers($stateParams.profielid).then(function(volgend){
				if(volgend.length < 20){
					$scope.moreMensenCanBeLoaded = false;
				}else{
					$scope.moreMensenCanBeLoaded = true;
				}
				if($scope.volgende.length > 0){
					objects.Merge($scope.volgende, volgend, 'id');
				}else{
					$scope.volgende = volgend;
				}
			});
			$scope.inProgress = false;
		}
		$scope.$broadcast('scroll.infiniteScrollComplete');	
		$ionicScrollDelegate.resize();
	};
3

Hey sjerd,

its fired twiced on initial load and on reaching the distance offset…

I will try the inProgress idea! Thx

Update: doesnt work…keeps firing twice

4

Oke, do you trigger the loadmore on statechangesucces? in that case you could try and use this on your infinite scroll

<ion-infinite-scroll
            ng-if="matches.length > 0 && moreData"
            on-infinite="loadMore()"
            distance="5%" >
</ion-infinite-scroll>

And when you call loadmore you set moredata to false and after that you set it to true which would cause the inifinte scroll to dissappear and reappear and when it reappears it will probably instantly run the function again.

5

Having the same issue as well

6

I tried some workarounds, but nothing worked for me…seems to be a bug

7 
$scope.loadMore = function()
	{
		
		console.log('ok');
		$timeout(function(){
			if($scope.collection.length > 0){
				$scope.$apply(function(){
					var off = $scope.page * 10;
					var range = off + 10;
					for(var i = off; i < range; i++)
					{
						var h = $scope.collection[i];
						if(!h) {
							$scope.$broadcast('scroll.infiniteScrollComplete');
								$scope.$broadcast('scroll.resize');
								return false;
						}
						$scope.rows.push($scope.collection[i]);
						if(i >= (range - 1))
						{
							
								$scope.$broadcast('scroll.infiniteScrollComplete');
								$scope.$broadcast('scroll.resize');
						
						}
					}

					$scope.page++;
				});
				
			} else {
								$scope.$broadcast('scroll.infiniteScrollComplete');
								$scope.$broadcast('scroll.resize');
							
			}
		},1000);
		
	}

This seemed to work for me… I’m not sure if me wanting to load more than one item at a time was the cause but it works now

8

Having the saming problem too.
was some one had solved it?

9

Did u try
immediate-check=“false”

on your ion-infinite-scroll

1 Like
10

Thank you! immediate-check=“false” fixed this issue for me.

I also had to add something like ng-if=“!endOfList && items && items.length > 0” to the infinite scroll to prevent it from firing over and and over and over again when I have an empty list or reached the end of the list.

11

To prevent the infinite-scroll event to keep on firing when there is no more content to load, use ng-if (as described in the official documentation Ionic infinite scroll

An example could be:

 //Directive
 <ion-infinite-scroll
            immediate-check="false"
            on-infinite="loadMore()"
            ng-if="hasMoreData"
            distance="1%">
 </ion-infinite-scroll>

//Controller
function MyController($scope, $http) {
  $scope.hasMoreData = true;
  $scope.items = [];
  $scope.loadMore = function() {
     $http.get('/more-items').success(function(items) {

        if(items.lenght > 0){
           useItems(items);            
        } else {
           $scope.hasMoreData = false;
        }

        $scope.$broadcast('scroll.infiniteScrollComplete');
     });
   }
}

Maybe that could work for you?

1 Like
12

what do you mean by matches.length ?

13

I am also facing this problem. I am fetching photo and data from server. On infinite scroll it fetch the data two times.

14

matches is the array of data i’m using in the infinite scroll, .length is a javascript array property which returns the number of elements in an array

15

Hi,
I got the answer from here http://datainflow.com/use-infinite-scroll-ionic/ .
Just using finally() we can prevent calling loadmore() more than one time .

16

Hi @Claas,
@sjerd solution is correct, one extra thing you can do is put $scope.$broadcast in timeout function like this.

$timeout(function () {
$scope.$broadcast('scroll.infiniteScrollComplete');
}, 1000);

//html
</ion-list> // end of list
<ion-infinite-scroll on-infinite="vm.loadMore()" ></ion-infinite-scroll>

this thing should help.

17

add immediate-check=“false” in your HTML infinity-scroll element