如何在ngInfiniteScroll（AngularJS）中设置节气门参数

Question

在我的角度应用程序，我现在用的是NG无限滚动以允许用户不间断的通过他们的“新闻源”滚动这里使用插件- https://sroze.github.io/ngInfiniteScroll/documentation.html

在我的桌面上，它运行良好，但是在Android设备上的Cordova应用程序中运行时，无限滚动会占用大量CPU资源。 我正在尝试使用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;
    }
}

我可以在控制台日志中看到的上述函数中的控制台日志一遍又一遍地输出太多 ，我正在尝试限制调用此函数的速度，但是我使用过的油门语句似乎没有什么区别？ 我在用代码做错什么

-版本-

Angular 1.3.0 ng-infinite-scroll 1.2.2

Answer 1

应该在将使用ngInfiniteScroll的模块上设置THROTTLE_MILLISECONDS 。 因此，对于您的情况，应在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) {
    }
]);

如果在渲染tabs[tabIndex].FeedService.loadFeed新结果之前将infinite-scroll-disabled标志设置为true，则infinite-scroll事件函数（在您的情况下为tabs[tabIndex].FeedService.loadFeed ）将无限循环运行。 。

要解决此问题，请在下一个摘要循环中使用$timeout将infinite-scroll-disabled标志设置为true。 这意味着标志仅在渲染结果完成后才为true。 见下文...

<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 ，都会被大量调用。