Angular.js ng-repeat +无限滚动导致太多观察者

angular.js ng-repeat + infinite scroll causing too many watchers

本文关键字：太多 观察者 滚动 无限 js ng-repeat Angular      更新时间：2023-09-26

我有这样的代码:

<section infinite-scroll='load()'>
    <div class="product" ng-repeat="product in products | limitTo:total">
        ..
    </div>
 </section>
在控制器:

$scope.products = []; // array of all products
$scope.load = function() {
   $scope.total += 5;
};

当用户滚动到底部时，控制器增加limitTo变量，这样他将看到5个以上的产品。如果有40个产品站点有4700个观察者。如果他继续滚动，可能会有1.2万观众…有什么好办法吗?每个产品都有用于添加到购物车操作的各种输入。

我正在寻找虚拟重复(例如。这个)，但是它使用了一个固定高度的容器，所以这样滚动产品会很难看，而且是完全错误的。

Angular会在你的每个绑定表达式上放置一个监视。你必须减少代码中绑定表达式的数量，才能看到手表数量的减少。

然而，你可以尝试通过跟踪来帮助angular找出不应该重新计算的内容来缓解这个问题。

<section infinite-scroll='load()'>
    <div class="product" ng-repeat="product in products | limitTo:total track by $index">
        ..
    </div>
 </section>

为了删除不需要的表，请考虑只呈现对用户可见的内容，如果可能的话，将其他所有内容替换为空元素。

您没有说明该列表是否应该是可编辑的。也就是说，我不认为一个可编辑的怪物列表(数千个元素)是可行的。

在我正在进行的一个项目中，我们有与您所呈现的相同的用例。到目前为止，列表中大约有5000个元素，它似乎工作得很好:我们已经竭尽全力使用一次性绑定，并创建了高效的目录，从而尽可能快地释放它们的监视器。

对于编辑，我们传递被点击的元素，并在单独的上下文中打开它。

相关文章：