在angularjs（2k行）中加载大量数据后浏览器被冻结答案

【问题标题】：Browser get freezed after loading huge data in angularjs (2k rows)在angularjs（2k行）中加载大量数据后浏览器被冻结
【发布时间】：2019-07-31 08:41:02
【问题描述】：

我正在从服务器获取数据，它的加载时间非常好，但是同时将所有数据呈现近 3k 行以查看（angularJs）浏览器冻结，一段时间后它也崩溃了。
我尝试了分页，但在跨越 500 行后它开始冻结。有时它会将所有数据加载到视图中，但在滚动或应用某些事件（如再次单击）时会冻结。

这是我列出所有数据的代码。

 <div class="divRow" ng-repeat="list in campaignDetailListfilterCopy.campaign_items | limitTo:totalDisplayed"">
                <div class="divCell">
      <div style="float:left;width: 325px;">
         <div>
           <span ng-if="list.monitor_type == 3">{{list.items.media_id}}</span>
             <div class="moImgPreview hoverPreview creativePreview">   <img alt=""ng-src="{{list.items.media_thumbnail}}"/></div>
           </span>
       </div>
       <p><strong class="lang" key="campaign_List_view_text2">Location</strong><span>{{list.items.media_address}}</span> </p>                                                                                                                                
    </div>
</div>

<button class="btn" ng-click="loadMore()">Load more</button>

//the controller
$scope.totalDisplayed = 20;

$scope.loadMore = function () {
  $scope.totalDisplayed += 20;  
};

$scope.campaignDetailListfilterCopy.campaign_items = data;

【问题讨论】：

500 行不适合任何会加载您网站的屏幕。尝试加载多达 2 个屏幕的项目，并且仅在用户需要时加载更多项目。我不知道你的行有多大，但我想说 50-75 行应该是你一次应该渲染的最大值
500 行的意思是，在点击从 20 行加载更多以增加 500 行之后，就会出现问题
此时再添加 50 个，而不是 500 个
另外，你是一一添加还是同时添加？
我必须显示 2k 行。最初我显示 20 行，并且有一个按钮可以加载更多，在单击加载更多后，它会从数据中加载 20 多行（已经从服务器加载数据）。现在，当它达到 500 或更多行时，一次又一次地点击加载更多，然后浏览器在下一次加载更多点击时冻结

标签： javascript angularjs angularjs-directive angularjs-ng-repeat lazy-loading

【解决方案1】：

你应该保留两个单独的列表，一个包含所有数据，另一个应该只包含 20 个，当你按下加载更多时，它应该从包含所有数据的列表中添加 20 个循环

$scope.loadMore = function(){
let start = $scope.listToShow.length;
 for(let i = start; i<= start + 20; i++){
   if(angular.isDefined($scope.campaignDetailListfilterCopy.campaign_items[i]) {    
 $scope.listToShow.push($scope.campaignDetailListfilterCopy.campaign_items[i]);
   }

 }
}

$scope.listToShow= []
$scope.campaignDetailListfilterCopy.campaign_items = data;
$scope.loadMore();

在你的 html 中

<div class="divRow" ng-repeat="list in listToShow">

也许在您的列表中，您可以添加一个调用 loadMore 的按钮

<button ng-click="loadMore()"> load more</button>

【讨论】：

显示错误：- listToShow 未定义。 $scope.listToShow 和 listToShow 是两个不同的变量还是相同的？如果两者都相同，那么它将进入无限循环..请再清除一点@Jazib
嗨，是的，它们是相同的变量。你应该在你的控制器顶部将它定义为空列表，当你得到数据时，你调用$scope.loadMore() Ah nice catch。我将更新我的答案以避免无限循环
@NitishKumar 现在检查一下，我还添加了一个条件，因此如果索引超出包含所有数据的列表的长度，您就不会收到未定义的错误
现在您的代码运行良好，但没有解决我的问题。仍然是同样的问题。在达到更多数量或行数后，它开始冻结。
@NitishKumar 你能创建一个 plunkr 吗？