javascript - 在angularjs(2k行)中加载大量数据后，浏览器被卡住

我正在从服务器获取数据，其加载时间相当不错，但是
同时呈现所有数据近3k行以查看(angularJs)浏览器
冻结，一段时间后它也崩溃了。
我尝试了分页，但经过500行后开始冻结。一段时间后，它会将所有数据加载到 View 中，但是在滚动或应用某些事件(如再次单击)时冻结。

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

 <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;

最佳答案

您应该保留两个单独的列表，一个保留所有数据，而另一个首先应仅保留20个数据，当您按load加载时，应从具有循环所有数据的列表中向列表添加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>

关于javascript - 在angularjs(2k行)中加载大量数据后，浏览器被卡住，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57286606/