Angular requestAnimationFrame

using requestAnimationFrame instead of setInterval for better perf

by wesleyhales

HTML

<script src="http://code.angularjs.org/1.1.5/angular.js"></script>
<div ng-controller='myCtrl'>
    <p>{{autoUpdateTimer}}</p>
</div>

JavaScript

window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame    ||
    window.oRequestAnimationFrame      ||
    window.msRequestAnimationFrame     ||
    function(/* function */ callback, /* DOMElement */ element){
      window.setTimeout(callback, 1000 / 60);
    };
})();

function myCtrl($scope){
    var keepgoing = true;
    $scope.autoUpdateTimer = 30;
    animate();
    var currentSecond;


    function animate() {
      if(keepgoing){
        requestAnimFrame( animate );
        draw();
      }
    }

    function draw() {
      if(!$scope.$$phase && currentSecond !== new Date().getSeconds()){
        $scope.$apply(function() {
          $scope.autoUpdateTimer--;
        });
        currentSecond = new Date().getSeconds();
      }
    }
}