sroze / ngInfiniteScroll

Infinite Scrolling for AngularJS
http://sroze.github.com/ngInfiniteScroll/
MIT License
2.89k stars 723 forks source link

Custom defined modules with infinite scroll - how to set the throttle parameter #369

Open gkimpson opened 7 years ago

gkimpson commented 7 years ago

In my Angular application I am using the ng-infinite-scroll to allow a user to scroll through their 'news feed' - On my desktop it runs fine, however when running this inside a Cordova app on an Android device the infinite scrolling uses a lot of CPU resources (and will hang eventually). I am trying to use the THROTTLE_MILLISECONDS option to only process scroll events every x seconds (this should increase performance and make scrolling less jerky).

I have my modules defined as follows:

var abcdDirectives = angular.module('abcdDirectives', []);
var abcdServices = angular.module('abcdServices', [ 'ngResource', 'infinite-scroll', 'ngCookies']);

abcdApp.value('THROTTLE_MILLISECONDS', 10000);

I am trying to throttle this as follows using the line above but it doesn't seem to make any difference.

In my template view I have the following code :

<div 
  infinite-scroll="tabs[tabIndex].FeedService.loadFeed(false, tabs[tabIndex].FeedService.filters, search.text, search.dateFrom, search.dateTo)"
  infinite-scroll-disabled="tabs[tabIndex].FeedService.busy || tabs[tabIndex].FeedService.noMoreResults || !tabs[tabIndex].active || tabs[tabIndex].FeedService.initialLoad"
  infinite-scroll-distance="1"
  infinite-scroll-immediate-check="false" >
<div ng-repeat="interaction in getTabItems(tabIndex) track by $index">

Within the js controller here is my getTabItems function

$scope.getTabItems = function (index) {
    if (angular.isDefined($scope.tabs[index].FeedService)) {
        console.log('getTabItems'); // this is being output to the console log over and over again extremely quickly
        return $scope.tabs[index].FeedService.items;
    }
}

The console log in the function above I can see in the console log is being output over and over again far too much & I am trying to throttle this function getting called but the throttle statement I have used seems to make no difference? What I am doing wrong with the code

-- Versions --

Angular 1.3.0 ng-infinite-scroll 1.2.2

celikmustafa89 commented 7 years ago

you can decrease the infinite-scroll-distance=0, it will improve your performance a bit. your code only works when you came the bottom of the page. It is not a huge difference but a bit better. @gkimpson