Как установить параметр газа в ngInfiniteScroll (AngularJS)

Question

В моем приложении Angular я использую ng-infinite-scroll, чтобы позволить пользователю непрерывно прокручивать свою "ленту новостей" с помощью плагина здесь - https://sroze.github.io/ngInfiniteScroll/documentation.html

На моем рабочем столе он работает нормально, однако при запуске его внутри приложения Cordova на устройстве Android бесконечная прокрутка использует много ресурсов ЦП. Я пытаюсь использовать опцию THROTTLE_MILLISECONDS, чтобы обрабатывать только события прокрутки каждые x секунд (это должно повысить производительность и сделать прокрутку менее резкой).

Мои модули определены следующим образом:

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

abcdApp.value('THROTTLE_MILLISECONDS', 10000);

Я пытаюсь задушить это следующим образом, используя строку выше, но, похоже, это не имеет никакого значения.

В моем представлении шаблона у меня есть следующий код:

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

В контроллере js есть моя функция getTabItems

$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;
    }
}

Журнал консоли в функции выше, которую я вижу в журнале консоли, выводится снова и снова, слишком много, и я пытаюсь ограничить вызов этой функции, но оператор throttle, который я использовал, кажется, не имеет значения? Что я делаю не так с кодом

- Версии -

Angular 1.3.0ng-infinite-scroll 1.2.2

Answer 1

THROTTLE_MILLISECONDS должен быть установлен на модуле, который будет использовать ngInfiniteScroll, Так что для вашего случая это должно быть установлено на abcdServices, как это.

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

abcdServices.value('THROTTLE_MILLISECONDS', 10000);

Но по моему мнению, ценность должна быть с его прямым родителем (который используют ngInfiniteScroll). Как это.

angular.module('yourApp.controllers', [])
.value('THROTTLE_MILLISECONDS', 5000)
.controller('controllerWhichUseInfiniteScroll',
['$scope',
    function ($scope) {
    }
]);

infinite-scroll функция события (tabs[tabIndex].FeedService.loadFeed в вашем случае) будет работать в бесконечном цикле, если вы установите infinite-scroll-disabled установить в true, прежде чем отображать новые результаты tabs[tabIndex].FeedService.loadFeed закончен.

Чтобы устранить проблему, установите infinite-scroll-disabled установить значение true в следующем цикле дайджеста, используя $timeout, Это означает, что флаг будет истинным, только когда закончится рендеринг результатов. Увидеть ниже...

<div 
  infinite-scroll="getDataFromApi()"
  infinite-scroll-disabled="loaded"
  infinite-scroll-distance="1">
    <div ng-repeat="data in dataList">

-

angular.module('yourApp.controllers')
.controller('yourController',
['$scope', '$timeout', 'apiDataService',
    function ($scope,  $timeout, apiDataService) {
        $scope.dataList = [];

        $scope.getDataFromApi = function () {
            $scope.loaded = false;
            apiDataService.getData()
                .then(function(result) {
                    $scope.dataList = result.data;

                    //Set loaded to true after rendering new results is finished.Otherwise it will make infinite api calls.
                    $timeout(function (){
                        $scope.loaded = true;
                    });
                });
        }
    }
]);

Также стоит отметить, что getTabItems() не следует использовать для привязки данных в html по соображениям производительности. Потому что angular поместит его в цикл дайджеста для обнаружения изменений и будет вызывать партии и партии независимо от того, используете ли вы ngInfiniteScroll или нет.