优化angularjs中的ng-bind指令 [英] Optimise ng-bind directive in angularjs
问题描述
在我的角度js应用程序中,我有一个对象数组$scope.time
,其中包含名称,当前时间和另一个定义的时间(以毫秒为单位).
在前端,我使用ng-bind
来计算这两个时间之间的时差,并以H:m:s格式显示.请运行下面的代码.
In my angular js app I have an array of objects $scope.time
which contain a name, the current time and another defined time in milliseconds.
In the front-end I'm using ng-bind
to calculate the difference between these two time and display it in H:m:s format. Please run the code below.
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>
当我从api获取数据时,$scope.time
数组是动态的(出于演示的目的,我在此处定义了硬编码).
当我在$scope.time
数组中有几个对象时,上面的代码可以顺利运行.但是,当有数千个对象时,由于msTotime
过滤器不断计算毫秒之间的差并将其转换为H:m:s
并将其绑定到前端,因此我的浏览器开始滞后.
The $scope.time
array is dynamic as I get that data from an api(I defined it hardcoded here for the purpose of demonstration).
The above code works smoothly when I have a few objects in the $scope.time
array. But when there are thousands of objects then my browser starts to lag as the msTotime
filter keeps calculating the difference between the milliseconds and converts it to H:m:s
and binds it to the frontend.
现在的问题是,当有1000个对象时,我的浏览器消耗40%的CPU.我相信ng-repeat
并不是问题,因为当我注释<p style="display:inline-block" ng-bind="realtime | msTotime:timer.time:timer.now">
时,cpu的使用率只有5%,并且有1000多个对象.
Now the issue is that my browser consumes 40 percent CPU when there are 1000 objects. I believe it's not an issue with ng-repeat
as when I commented out <p style="display:inline-block" ng-bind="realtime | msTotime:timer.time:timer.now">
the cpu usage was just 5 percent with more than 1000 objects.
这里是否有任何方法可以优化ng-bind
指令或以其他方式进行时间计算,以使msTotime
过滤器完成的计算不会消耗太多的CPU.
Is there any way to optimize the ng-bind
directive here or do the time calculation in some other way so that the calculations done by msTotime
filter don't consume so much CPU.
推荐答案
我建议使用 lodash https://lodash.com 库在每个对象中附加时间差,而不是使用directive
做到这一点.因此,每次从查询中获取数据时,请使用_.each
进行相同的操作并插入var realtime
.
I would suggest to use lodash https://lodash.com library to append the time diffrence in each object instead using directive
to do that. so each time you get data from query use _.each
to do the same operation and insert var realtime
.
var app = angular.module('angularapp', []);
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}
];
_.each($scope.time, function(obj, index){
var startDate = new Date(obj.time);
var endDate = new Date(obj.now);
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') {
obj.realtime = defaulttime;
} else {
obj.realtime = final;
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.core.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;">{{timer.realtime}}</p><br>
</div>
</div>
</div>
这篇关于优化angularjs中的ng-bind指令的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!