Attempting to achieve a seamless and continuous animation using AngularJS and Snap SVG, I believed I had successfully resolved the issue as my animations ran smoothly for hours on end. However, leaving my solution running over the weekend in Chrome, Opera, Safari, and Firefox (where Internet Explorer failed to run it at all), I encountered crashes on Firefox and Opera upon returning to work this morning, with Chrome and Safari pages frozen.
The animation functions in question are as follows:
/* defining the hub's center in the drawing */
var hubCenter = "269, 367";
/* time taken to complete an animation move */
var moveTime = 100;
/* name of the Angular module I'm creating */
var turbineApp = angular.module('spinningTurbine', []);
/* controller for that module */
turbineApp.controller('turbineController', ['$scope', function ($scope) {
$scope.speed = 0;
$scope.angle = 0;
$scope.height = 150;
/**
* Rotate the element with the specified tag around the hub center location
* to reflect the specified value.
*/
$scope.sweep = function( tag, angle) {
var elt = Snap(tag);
var directive = "r" + angle + ", " + hubCenter;
elt.animate({
transform: directive
}, moveTime);
}
function spinner() {
setTimeout( function() {
$scope.angle += parseFloat($scope.speed);
$scope.sweep( '#blades', $scope.angle);
spinner();
}, moveTime);
}
spinner();
}]);
My inquiry pertains to whether the JavaScript setTimeout() function uses up resources (e.g., stack) or if Snap SVG is utilizing resources by continually expanding the transformation path.
I aim for this animation to operate indefinitely, thus necessitating either identifying the cause of browser crashes or reconfiguring it with an alternate method. Are there other mechanisms in Angular JS for executing a non-terminating loop?