javascript - Angular : Infinite scroll not working when using ngInclude in masonry

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 转移到 Angular 的 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或 Underscore throttle 函数并让 infinite-scroll 调用原始函数的节流版本。像这样，在 infinite-scroll 再次调用它之前，允许一些时间来生成内容并完成滚动，正如@toskv 所建议的:

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

属性 'leading' 和 'trailing' 表示“如果该函数之前被调用，则只监听对 getFlags() 的第一次调用500ms，最后不要再调用一次。

infinite-scroll 现在应该使用 throttled 函数:

<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 ms 后的下一次调用将被执行，但到那时，ng-include 加载的内容已经可以生成了。我想这需要根据具体情况进行调整。