JavaScript/JQuery: $(window).resize how to fire AFTER the resize is completed?

Question

I'm using JQuery as such:

$(window).resize(function() { ... });

However, it appears that if the person manually resizes their browser windows by dragging the window edge to make it larger/smaller, the .resize event above fires multiple times.

Question: How to I call a function AFTER the browser window resize completed (so that the event only fires once)?

Answer 1

See this answer: http://stackoverflow.com/questions/667426/javascript-resize-event-firing-multiple-times-while-dragging-the-resize-handle/668185#668185

It involves the use of timeouts to delay the execution of your function.

Answer 2

I use the following function for delaying repeated actions, it will work for your case:

var delay = (function(){
  var timer = 0;
  return function(callback, ms){
    clearTimeout (timer);
    timer = setTimeout(callback, ms);
  };
})();

Usage:

$(window).resize(function() {
    delay(function(){
      alert('Resize...');
      //...
    }, 500);
});

The callback function passed to it, will execute only when the last call to delay has been made after the specified amount of time, otherwise a timer will be reset, I find this useful for other purposes like detecting when the user stopped typing, etc...