Skip to content

Commit

Permalink
Run callbacks only if size changed between two frames
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
luzat committed Nov 4, 2016
1 parent 3ff3bd2 commit cd5bda1
Showing 1 changed file with 15 additions and 6 deletions.
21 changes: 15 additions & 6 deletions src/ResizeSensor.js
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -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();
};
Expand Down

0 comments on commit cd5bda1

Please sign in to comment.