Run callbacks only if size changed between two frames

An element may change its size multiple times during a frame. Do not
emit events anymore if its size returned to its previous size since the
last update. This means that events occurring in between two frames -
which are never visible to the user - may be skipped.

Author: luzat

src/ResizeSensor.js

@@ -141,9 +141,20 @@
             var dirty, lastWidth, lastHeight;
 
             var updateSize = function() {
+                var newWidth = element.offsetWidth;
+                var newHeight = element.offsetHeight;
+
                 dirty = false;
-                lastWidth = element.offsetWidth;
-                lastHeight = element.offsetHeight;
+
+                // The size may stay the same if the element changed size more than once during one frame.
+                if (newWidth == lastWidth && newHeight == lastHeight) {
+                    return false;
+                }
+
+                lastWidth = newWidth;
+                lastHeight = newHeight;
+
+                return true;
             };
 
             updateSize();
@@ -163,11 +174,9 @@
 
             var onResized = function() {
                 // To prevent layout thrashing: first read from DOM ...
-                updateSize();
-
-                if (!element.resizedAttached) return;
+                if (!updateSize() || !element.resizedAttached) return;
 
-                /// ... then update
+                /// ... then update.
                 element.resizedAttached.call();
                 reset();
             };