Fix memory leak and improve performance (closes #8)

README

@@ -4,17 +4,17 @@ throbber.js
 
 Background: I needed a really nice looking spinner that works on top of images. Even though
 there are quite a few javascript solutions available, none of them looked the way I wanted.
-So I created my own. And it went pretty well, so I github'd and MIT'd it. 
+So I created my own. And it went pretty well, so I github'd and MIT'd it.
 
 Demo: http://aino.github.io/throbber.js/
 
-Throbber uses canvas and animationFrame to create the animation and graphics. 
-It does not fiddle with VML for IE, instead you can pass a fallback gif for all browsers 
+Throbber uses canvas and animationFrame to create the animation and graphics.
+It does not fiddle with VML for IE, instead you can pass a fallback gif for all browsers
 that do not support canvas. It adjusts itself for retina resolutions.
 
 It’s a mere 1.2k gzipped & minified
 
-Install using Bower: 
+Install using Bower:
 
   bower install throbber.js
 
@@ -34,7 +34,7 @@ Creates a 20x20 pixels throbber:
   loader.start();
 
 Creates a throbber with options:
-  
+
   var loader = Throbber({ size:40, padding: 30 });
 
 --
@@ -62,4 +62,11 @@ alpha                 // global alpha (0-1), can be defined using rgba color or
 fps                   // frames per second
 padding               // diameter of clipped inner area
 strokewidth           // width of the lines
-lines                 // number of lines (~size/2+4)
+lines                 // number of lines (~size/2+4)
+
+## Changelog
+
+### 0.0.3
+
+* Performance improved by stoping loops when throbbers stop.
+* Fix memory leak due to saving canvas contexts without restore

bower.json

@@ -1,7 +1,7 @@
 {
   "name": "throbber.js",
   "main": "throbber.js",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "homepage": "https://github.com/aino/throbber.js",
   "authors": [
     "Aino <http://aino.com>"

throbber.js

@@ -1,5 +1,5 @@
 /**
- * @preserve throbber.js v 0.0.2 2014-04-30
+ * @preserve throbber.js v 0.0.3 2015-12-08
  * http://aino.com
  *
  * Copyright (c) Aino Aktiebolag
@@ -45,27 +45,36 @@
 
             var requestFrame = (function(){
               var r = 'RequestAnimationFrame';
-              return window.requestAnimationFrame || 
-                window['webkit'+r] || 
-                window['moz'+r] || 
-                window['o'+r] || 
-                window['ms'+r] || 
+              return window.requestAnimationFrame ||
+                window['webkit'+r] ||
+                window['moz'+r] ||
+                window['o'+r] ||
+                window['ms'+r] ||
                 function( callback ) {
                   window.setTimeout(callback, 1000 / 60);
                 };
             }());
 
             function tick() {
-
-                requestFrame(tick);
+                if (loops.length) {
+                    requestFrame(tick);
+                } else {
+                    animating = false;
+                }
                 var now = +(new Date());
 
                 for(var i=0; i<loops.length; i++) {
                     var loop = loops[i];
                     loop.elapsed = now - loop.then;
                     if (loop.elapsed > loop.fpsInterval) {
                         loop.then = now - (loop.elapsed % loop.fpsInterval);
-                        loop.fn();
+                        var ret = loop.fn();
+                        if (ret) {
+                            // true-ish return value indicates the animation is
+                            // done. Remove it from the list of loops.
+                            loops.splice(i, 1);
+                            i--;
+                        }
                     }
                 }
             }
@@ -153,7 +162,6 @@
             }
 
             if ( o.rotationspeed ) {
-                ctx.save();
                 _restore( ctx, size, false );
 
                 ctx.rotate( rd * ( 360/o.lines/( 20-o.rotationspeed*2 ) ) * M.PI/180 ); //rotate in origin
@@ -202,11 +210,11 @@
         this.configure( options );
 
         // fade phase
-        // 0 = idle
+        // 0 = stopped
         // 1 = fadein
         // 2 = running
         // 3 = fadeout
-        this.phase = -1;
+        this.phase = 0;
 
         // references
         if ( support ) {
@@ -263,11 +271,10 @@
                     _draw( alpha, o, scope.ctx, step );
                     step = step === 0 ? scope.o.lines : step-1;
                 }
+
+                return (scope.phase == 0);  // stop
             };
         }());
-
-        _animate(this.o.fps, this.loop);
-
     }
 
     // Throbber prototypes
@@ -284,6 +291,13 @@
             return this;
         },
 
+        // stop the throbber and remove it from the DOM
+        remove: function() {
+            this.elem.parentNode.removeChild(this.elem);
+            this.phase = 0;  // stop loop on next frame
+            return this;
+        },
+
         // _extend options and apply calculate meassures
         configure: function( options ) {
 
@@ -307,7 +321,7 @@
 
             // copy the amount of lines into steps
             this.step = o.lines;
-            
+
             // double-up for retina screens
             if (!!window.devicePixelRatio) {
                 // lock element into desired end size
@@ -326,8 +340,8 @@
         start: function() {
 
             this.elem.style.display = 'block';
-            if ( this.phase == -1 ) {
-                this.loop();
+            if ( this.phase == 0 ) {
+                _animate(this.o.fps, this.loop);
             }
             this.phase = 1;
 
@@ -341,7 +355,7 @@
         },
 
         toggle: function() {
-            if ( this.phase == 2 ) {
+            if ( this.phase == 1 || this.phase == 2 ) {
                 this.stop();
             } else {
                 this.start();