javascript - 如何在ngInfiniteScroll(AngularJS)中设置 throttle 参数

Question

在我的 Angular 应用程序中，我使用 ng-infinite-scroll 来允许用户使用此处的插件连续滚动其“新闻提要” - 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);

我试图使用上面的行按如下方式限制它，但它似乎没有任何区别。

在我的模板 View 中，我有以下代码:

<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 Controller 中，这是我的 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.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);

但在我看来，值(value)应该在于它的直接父级(使用 ngInfiniteScroll )。像这样。

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

infinite-scroll如果您设置 tabs[tabIndex].FeedService.loadFeed ，事件函数( infinite-scroll-disabled 在您的情况下)将在无限循环中运行在渲染 tabs[tabIndex].FeedService.loadFeed 的新结果之前标记为 true完成了。

要解决此问题，请设置 infinite-scroll-disabled在下一个摘要循环中使用 $timeout 标记为 true 。这意味着只有当渲染结果完成时，flag 才会为 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 中绑定(bind)数据。因为 Angular 会将其放入摘要循环中进行更改检测，并且无论您是否使用 ngInfiniteScroll 都会被多次调用。或不。