How do I make the javascript resize event handler happen only after the user stops resizing the window?

Question

How do I make the javascript resize event handler happen only after the user stops resizing the window? I don't want it to get called over and over again as the user is resizing the window.

$(window).resize(function () {
            if( document.getElementById('staticImage').style.display == 'table-cell') {
                resizeWithImageMap();
            } else {
                resizeWithoutImageMap();
            }
        });

Thanks.

http://benalman.com/code/projects/jquery-throttle-debounce/examples/throttle/ — adeneo, May 07 '14 at 02:34

score 0 · Accepted Answer · answered May 07 '14 at 02:50

Adeneo posted a nice functional example, but I'm partial to building it all into my own handler:

var resizeComplete = (function() {
  var funcs = [];
  var timer ;
  var delay = 250;

  window.onresize = function() {
    window.clearTimeout(timer);

    timer = window.setTimeout(function() {
      for (var i = 0; i < funcs.length; i++) {
        funcs[i](); // Call the func
      }
    }, delay);

  };

  function register(func) {
    funcs.push(func);
  }

  return {
    register: register
  }
}());

resizeComplete.register(function() {
  console.log("Resize complete");
});

How do I make the javascript resize event handler happen only after the user stops resizing the window?

1 Answers1