JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<div class="stam" ng-app>
<div ng-controller="StamCtrl">
<button ng-click="testButton()">Test</button>
<div id="results"></div>
<div ng-repeat="a in array | limitTo:tick">
<input ng-model="a.qqqq">
</div>
</div>
</div>
JavaScript
function StamCtrl($scope) {
$scope.array = [];
$scope.testButton = function() {
// I want to run outside the digest loop,
// so I can measure the digest myself
setTimeout(function() {
$scope.test(10000, 10);
}, 0);
};
$scope.test = function(numOfObjects, tickAmount) {
// This method measures how much time the digest method
// takes when changing the array to have 'numOfObjects' objects in it
var sum = 0;
$scope.array = [];
$scope.$digest();
$scope.tick = 1;
for (var j = 0; j < numOfObjects; j++) {
$scope.array.push({});
}
var t = +new Date();
var repeatAsyncHack = function() {
$scope.$digest();
sum += +new Date() - t;
if($scope.tick < numOfObjects) {
$scope.tick+=tickAmount;
requestAnimationFrame(repeatAsyncHack);
} else {
$('#results').prepend(
$("<div>" +
numOfObjects + ' objects test took: ' + sum +
"ms</div>"));
}
}
requestAnimationFrame(repeatAsyncHack);
};
};