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 wind

Answer 1

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...