Question

我使用的是AngularJS，其中ngInfiniteScroll和angular-masonry。

我目前在PHP中有一些我的前端部分，但我試圖將所有內容都移植到HTML + JS。

這是目前工作正常：

<div id="flagevent-container" 
    infinite-scroll='getFlags()' 
    infinite-scroll-disabled='loadingMore' 
    infinite-scroll-distance='0' 
    masonry="{'gutter': 10}" preserve-order load-images="false" 
    item-selector=".flagevent"> 
    <div masonry-brick id="flagevent{{flagevent.id}}" class="flagevent" 
     ng-repeat="flagevent in flagsInWall"> 
    <?php include "flagevent.inc.html"; ?> 
    </div> 
</div> 

現在我想從PHP的include到角的ng-include移動。我將在masonry-brick水平插入：

<div id="flagevent-container" 
    infinite-scroll='getFlags()' 
    infinite-scroll-disabled='loadingMore' 
    infinite-scroll-distance='0' 
    masonry="{'gutter': 10}" preserve-order load-images="false" 
    item-selector=".flagevent"> 
    <div masonry-brick id="flagevent{{flagevent.id}}" class="flagevent" 
     ng-repeat="flagevent in flagsInWall" 
     ng-include="'flagevent.inc.html'"> 
    </div> 
</div> 

但後來無限滾動無法正常工作;方法getFlags()被重複調用而不滾動，從而檢索所有項目，並且所有元素一次被加載。

發生了什麼事？

Answer 1

最好的選擇是使用lodash或Underscorethrottle函數並讓infinite-scroll調用原始函數的節流版本。這樣，一段時間被允許用於產生並實現滾動infinite-scroll再次調用它之前的內容，通過@toskv的建議：

$scope.throttled = _.throttle($scope.getFlags, 500, {'leading': true, 'trailing': false}); 

屬性'leading'和'trailing'平均「只聽第一次調用getFlags()如果函數在500毫秒之前被調用，並且最後不再調用它。

infinite-scroll現在應該使用節流功能：

<div id="flagevent-container" 
    infinite-scroll='throttled()' 
    infinite-scroll-disabled='loadingMore' 
    infinite-scroll-distance='0' 
    masonry="{'gutter': 10}" preserve-order load-images="false" 
    item-selector=".flagevent"> 
    <div masonry-brick id="flagevent{{flagevent.id}}" class="flagevent" 
     ng-repeat="flagevent in flagsInWall" 
     ng-include="'flagevent.inc.html'"> 
    </div> 
</div> 

後500毫秒接下來的通話將被執行，但那時，已經可以產生由ng-include加載的內容。我想這需要根據每個案例進行調整。