jQuery - Window resize; after
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.
Set a timeout and do the action 100ms later, perhaps.
var timer;
$(window).resize(function() {
clearTimeout(timer);
timer = setTimeout(myFunction, 100);
});
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
}
});
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).
精彩评论