Approximating resizeComplete in jQuery

Most browsers fire resize events continuously as the viewport is scaled. This is handy when your interface needs to change responsively during a resize, but a PITA if you only need to perform a single action when it’s “done.” Even worse is when that action is resource-intensive (such as an animation), as it can render your resize choppy or unbearable. I was faced with this very problem on a recent site design, and I thought I’d share the solution I arrived at.

The basic idea is to call a function within the resize() callback on a delay. This function checks to see if the width and height of the window have maintained dimensions during this period, and if so performs your resize completed action. Here is the code in jQuery:

  1. // global queue of setTimeout handles
  2. var handleQueue = new Array();
  4. $(window).resize(function() {
  5. // store current dimensions using .data()
  6. $(window).data(′oldW′, $(window).width()).data(′oldH′, $(window).height());
  7. // call our function on a delay and push its handle on the queue
  8. handleQueue.push(setTimeout(_completeCheck, 750));
  9. });
  11. function _completeCheck() {
  12. var $window = $(window);
  13. if ($window.width() == $window.data(′oldW′) && $window.height() == $window.data(′oldH′) {
  15. // *** DO YOUR RESIZE COMPLETE STUFF HERE ***
  17. // unwind setTimeout handle queue to prevent further execution
  18. while (handleQueue.length != 0)
  19. clearTimeout(handleQueue.shift());
  20. } else {
  21. // otherwise shift the first handle off since it already executed
  22. handleQueue.shift()
  23. }
  24. }

I chose to go the route of a handle queue because I feel it’s a lot cleaner than some global boolean. The boolean approach will still execute delayed function calls after the resize is “done,” and I’d rather unwind a queue and cancel those calls immediately since they’re unnecessary. You might also need to noodle with the setTimeout interval to achieve the responsiveness you’re after. In my case, 750ms was just right.