Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
gkimpson opened this issue Sep 1, 2017 · 1 comment

Comments

@gkimpson
Copy link

gkimpson commented Sep 1, 2017

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

@gkimpson gkimpson changed the title Custom defined modules with infinite scroll - how to set the THROTTLE_MILLISECONDS value Custom defined modules with infinite scroll - how to set the throttle parameter Sep 1, 2017
@celikmustafa89
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants