如何設置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

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你的情況）將在無限循環運行，如果你渲染的tabs[tabIndex].FeedService.loadFeed新成果完成之前設定infinite-scroll-disabled標誌設置爲true。

要解決該問題，請使用$timeout在下一個摘要循環中將infinite-scroll-disabled標誌設置爲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性能原因數據綁定。因爲角度會將其置於摘要循環中以進行更改檢測，並且無論您是否使用ngInfiniteScroll，都會被調用很多次。