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>
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.
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.
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.
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 varrealtime
.