CODEWITHSUNDEEP
ionic-frameworkinfinite-scrollion-infinite-scroll
jcarballo
jcarballo

Reputation: 29083

ion-infinite-scroll loops forever calling on-infinite callback

The problem: If I exit the current ion-view when the on-finite callback hasn't finished processing, the on-infinite callback will start getting called in a loop until the app freezes, even if I'm not in the view anymore where the ion-infinite-scroll was installed.

This was difficult to reproduce, but I have found a way to easily manifest it. Setup the on-infinite callback on the view.

<ion-infinite-scroll
    immediate-check="false"
    on-infinite="loadMore()"
    distance="5%">
</ion-infinite-scroll>

And then use $timeout to artificially slow down the loadMore() function to 2 seconds. Something like this:

$scope.loadMore = function() {
    console.log("Loading more...");
    $timeout(function() {
        $scope.$broadcast('scroll.infiniteScrollComplete');
    }, 2000);
};

Now, trigger the infinite scroll, and while your loadMore() function is "processing" for 2 seconds, leave your view. You will see that even that you are in another view, the console will continue to print "Loading more..." every 2 seconds. That is, loadMore() is being called in a loop.

On a real scenario, this bug is causing the app to freeze badly. On some links this issue has been addressed but no solutions (the ionic forum is down atm, btw). Some solutions out there suggest calling infiniteScrollComplete inside an $apply(), but that doesn't solve it and actually triggers a digest already in progress error. Others suggest to use $timeout(...,0) as an alternative to $apply() but still the issue will manifest if, for instance, your loadMore() does async calls to your server, in such case there is still a chance that the user exits the view while loadMore() is busy.

Is there any suggested workaround to this?

Ionic team: this is a bug. And all documentation everywhere about ion-infinite-scroll completely ignores this. There should be, at the very least, a warning. My ionic version 1.7.16.

Upvotes: 4

Views: 1014

Answers (2)

Gaurav Vachhani
Gaurav Vachhani

Reputation: 96

Try below code for infinite loop functionality

HTML

    <ion-infinite-scroll 
        ng-if="!noMoreDaTa" on-infinite="loadData()" 
        distance="2%" immediate-check="false">
    </ion-infinite-scroll>

Controller

    $scope.loadData = function() {
       if ($scope.dataRecords.length >= $scope.total_records) {
           $scope.noMoreDaTa = true;
       }
    }

Please let me know, if you need any help :)

Upvotes: 1

Paresh Gami
Paresh Gami

Reputation: 4782

Try below code for stop load more callback.

html

<ion-view view-title="Search">
    <ion-content>
        <h1>Search</h1>
        <ion-infinite-scroll
        immediate-check="false"
        ng-if="!noMoreItemsAvailable"
        on-infinite="loadMore()"
        distance="5%">
    </ion-infinite-scroll>
</ion-content>
</ion-view>

Controller

$scope.loadMore = function()
{
    $http({
    method:'GET',
    url:'http://headers.jsontest.com/'
    }).then(function(response)
    {
        console.log(response);
        $scope.noMoreItemsAvailable = true;
    }, function(response)
    {});
}

Upvotes: 1

Related Questions