Skip to content

Instantly share code, notes, and snippets.

@RadoMark
Created May 13, 2016 15:07
Show Gist options
  • Save RadoMark/5eaafa3d4947f7c3b5030b326eb30f7b to your computer and use it in GitHub Desktop.
Save RadoMark/5eaafa3d4947f7c3b5030b326eb30f7b to your computer and use it in GitHub Desktop.
Batch rendering
<body ng-controller="AppCtrl">
<div ng-repeat="element in elements | limitTo: elementsLimit track by element.id">
{{ element.name }}
</div>
</body>
<script>
app.controller("AppCtrl", function($scope, Elements) {
$scope.elements = Elements.get();
renderUsersInBatchesWithDelay(10, 5, 250)
function renderUsersInBatchesWithDelay(firstBatchSize, otherBatchSize, delay) {
var batchSize = firstBatchSize;
// We use window.setTimeout to call first step of rendering immediately, trigger $scope.$digest
// instead of $apply and avoid "digest in progress" error
setTimeout(function() {
batchRenderingStep(batchSize);
batchSize = otherBatchSize;
}, 0)
// We use here window.setInterval instead of Angular's $interval to trigger
// only $scope.$digest() instead of $rootScope.$apply() ($interval does that)
var interval = setInterval(function() {
batchRenderingStep(batchSize);
if($scope.elementsLimit >= $scope.elements.length) {
clearInterval(interval);
}
}, delay)
}
function batchRenderingStep(batchSize) {
$scope.elementsLimit += batchSize;
$scope.$digest();
}
})
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment