4

I am currently using jQuery's resize function, but because of what I adjust on resize, there's simply too much going on to make it look smooth, as it fires at every adjustment.

$(window).resize(function() {

myFunction();

});

Is there a way to fire a function off after the resize has stopped? Like $(window).afterResize() or something?

Any solutions welcome.

user113716
  • 318,772
  • 63
  • 451
  • 440
Michael Giovanni Pumo
  • 14,338
  • 18
  • 91
  • 140
  • possible duplicate of [JavaScript/JQuery: $(window).resize how to fire AFTER the resize is completed?](http://stackoverflow.com/questions/2854407/javascript-jquery-window-resize-how-to-fire-after-the-resize-is-completed) – user113716 Sep 13 '11 at 13:56
  • Paul Irish's debouncing script seems to be very effective. http://paulirish.com/2009/throttled-smartresize-jquery-event-handler/ – amd Jul 02 '12 at 15:33
  • You can use [Lock Size](http://plugins.jquery.com/plugin-tags/after-resize) plugin. – Andrei Bularca Sep 13 '11 at 14:09

3 Answers3

7

Set a timeout and do the action 100ms later, perhaps.

var timer;
$(window).resize(function() {
    clearTimeout(timer);
    timer = setTimeout(myFunction, 100);
});
lonesomeday
  • 233,373
  • 50
  • 316
  • 318
1

I am not sure if there is a 'clean' native way to do it (hopefully there is and someone will shed light)

but you "hack" it like this http://jsfiddle.net/tuuN3/ 

var myInterval = false; // this variable will hold the interval and work as a flag
var $win = $(window); //jquery win object
var dimensions = [ $win.width(), $win.height() ]; //initial dimensions

$(window).resize(function() { //on window resize...

    if( !myInterval ) //if the interval is not set,
    {
        myInterval  = setInterval( function() { //initialize it
            //and check to see if the dimenions have changed or remained the same
            if( dimensions[ 0 ] === $win.width() && dimensions[ 1 ] ===  $win.height() )
            {   //if they are the same, then we are no longer resizing the window
                clearInterval( myInterval ); //deactivate the interval
                myInterval = false; //use it as a flag

                doStuff(); //call your callback function
            }
            else
            {
                 dimensions[ 0 ] =    $win.width(); //else keep the new dimensions
                 dimensions[ 1 ] =    $win.height();
            }
        }, 64 );  //and perform a check every 64ms
    }

});
Pantelis
  • 6,086
  • 1
  • 18
  • 21
  • Please post your solution here, and supplement it with a jsFiddle link if you wish. SO is meant to be a standalone repository of questions and answers. This ensures that future readers can see your answer if the jsFiddle is no longer available. – user113716 Sep 13 '11 at 13:58
1

You should research "debounce" or "throttle" as it relates to javascript. Depending on your needs - you may need to use one or the other. Here is a debounce/throttle library I've used as well as great descriptions of their applications. There is no need to re-invent the wheel - plus it is always great to know the terminology and identify useful coding patterns (for future maintainers of your code).

SliverNinja - MSFT
  • 31,051
  • 11
  • 110
  • 173
  • 1
    You can still access the plugin via [GitHub portal](http://github.com/cowboy/jquery-throttle-debounce/) or [GitHub direct](http://github.com/cowboy/jquery-throttle-debounce/raw/master/jquery.ba-throttle-debounce.js) – SliverNinja - MSFT Dec 08 '11 at 22:21