jQuery - Window resize; after

Question

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.

Answer 1

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

var timer;
$(window).resize(function() {
    clearTimeout(timer);
    timer = setTimeout(myFunction, 100);
});

Answer 2

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
    }

});

Answer 3

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