cancelAnimationFrame for reset when detach is called (#282)

In ResizeSensor, we use requestAnimationFrame for reset. However, if an element is added to DOM and removed from DOM very quickly (even before the first reset happens), the reset itself will stuck in an infinite loop. It also causes memory leak because the reset function holds the element forever.

Author: Ruhao Gao

src/ResizeSensor.js

@@ -102,6 +102,8 @@
      * @constructor
      */
     var ResizeSensor = function(element, callback) {
+        var lastAnimationFrame = 0;
+        
         /**
          *
          * @constructor
@@ -204,7 +206,7 @@
             var lastWidth = 0;
             var lastHeight = 0;
             var initialHiddenCheck = true;
-            var lastAnimationFrame = 0;
+            lastAnimationFrame = 0;
 
             var resetExpandShrink = function () {
                 var width = element.offsetWidth;
@@ -281,14 +283,19 @@
             addEvent(shrink, 'scroll', onScroll);
 
             // Fix for custom Elements
-            requestAnimationFrame(reset);
+            lastAnimationFrame = requestAnimationFrame(reset);
         }
 
         forEachElement(element, function(elem){
             attachResizeEvent(elem, callback);
         });
 
         this.detach = function(ev) {
+            // clean up the unfinished animation frame to prevent a potential endless requestAnimationFrame of reset
+            if (!lastAnimationFrame) {
+                window.cancelAnimationFrame(lastAnimationFrame);
+                lastAnimationFrame = 0;
+            }
             ResizeSensor.detach(element, ev);
         };