在我的 Angular js 应用程序中,我有一个对象数组,$scope.time
其中包含一个名称、当前时间和另一个以毫秒为单位的定义时间。在前端我ng-bind
用来计算这两个时间之间的差异并以 H:m:s 格式显示。请运行下面的代码。
var app = angular.module('angularapp', []);
app.filter("msTotime", function() {
return function(timee,started,ended) {
var startDate = new Date(started);
var endDate = new Date(ended);
var milisecondsDiff = endDate - startDate;
var final = Math.floor(milisecondsDiff/(1000*60*60)).toLocaleString(undefined, {minimumIntegerDigits: 2}) + ":" + (Math.floor(milisecondsDiff/(1000*60))%60).toLocaleString(undefined, {minimumIntegerDigits: 2}) + ":" + (Math.floor(milisecondsDiff/1000)%60).toLocaleString(undefined, {minimumIntegerDigits: 2}) ;
var defaulttime = '00:00:00';
if(final == '-01:-01:-01'){
return defaulttime;
}
else {
return final;
}
}
});
app.controller('list', function($scope,$window) {
$scope.time = [{"game":"Halo","now":1554805270181,"time":1554794475267},
{"game":"CODuty","now":1554805270181,"time":1554802957031},
{"game":"WOF","now":1554805270181,"time":1554732154093},
{"game":"WarCraft","now":1554805270181,"time":1554803456875},
{"game":"POP","now":1554805270181,"time":1554803456275},
{"game":"RedBulls","now":1554805270181,"time":1554800620012},
{"game":"Eragon","now":1554805270181,"time":1554433320072}];
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular.min.js"></script>
<div ng-app="angularapp">
<div ng-controller="list" >
<div ng-repeat="timer in time">
<h5>{{timer.game}}</h5><hr>
Milliseconds to H:M:S for {{timer.game}} <p style="display:inline-block" ng-bind="realtime | msTotime:timer.time:timer.now"></p><br>
</div>
</div>
</div>
当$scope.time
我从 api 获取数据时,数组是动态的(为了演示的目的,我在这里对其进行了硬编码)。当我在$scope.time
数组中有几个对象时,上面的代码可以顺利运行。但是当有数千个对象时,我的浏览器开始滞后,因为msTotime
过滤器不断计算毫秒之间的差异并将其转换为并将其H:m:s
绑定到前端。
现在的问题是,当有 1000 个对象时,我的浏览器会消耗 40% 的 CPU。我相信这不是问题,ng-repeat
因为当我评论<p style="display:inline-block" ng-bind="realtime | msTotime:timer.time:timer.now">
超过 1000 个对象时,cpu 使用率仅为 5%。
有没有办法在ng-bind
这里优化指令或以其他方式进行时间计算,以便msTotime
过滤器完成的计算不会消耗太多CPU。