How to wait for the 'end' of 'resize' event and only then perform an action?

So I currently use something like:

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

But this gets called many times while resizing process goes on. Is it possible to catch an event when it ends?

You can use setTimeout() and clearTimeout()

function resizedw(){
    // Haven't resized in 100ms!
}

var doit;
window.onresize = function(){
  clearTimeout(doit);
  doit = setTimeout(resizedw, 100);
};

Code example on jsfiddle.

I had luck with the following recommendation: http://forum.jquery.com/topic/the-resizeend-event

Here's the code so you don't have to dig through his post's link & source:

var rtime;
var timeout = false;
var delta = 200;
$(window).resize(function() {
    rtime = new Date();
    if (timeout === false) {
        timeout = true;
        setTimeout(resizeend, delta);
    }
});

function resizeend() {
    if (new Date() - rtime < delta) {
        setTimeout(resizeend, delta);
    } else {
        timeout = false;
        alert('Done resizing');
    }               
}

Thanks sime.vidas for the code!

This is the code that I write according to @Mark Coleman answer:

$(window).resize(function() {
    clearTimeout(window.resizedFinished);
    window.resizedFinished = setTimeout(function(){
        console.log('Resized finished.');
    }, 250);
});

Thanks Mark!

Internet Explorer provides a resizeEnd event. Other browsers will trigger the resize event many times while you're resizing.

There are other great answers here that show how to use setTimeout and the .throttle, .debounce methods from lodash and underscore, so I will mention Ben Alman's throttle-debounce jQuery plugin which accomplishes what you're after.

Suppose you have this function that you want to trigger after a resize:

function onResize() {
  console.log("Resize just happened!");
};

Throttle Example
In the following example, onResize() will only be called once every 250 milliseconds during a window resize.

$(window).resize( $.throttle( 250, onResize) );

Debounce Example
In the following example, onResize() will only be called once at the end of a window resizing action. This achieves the same result that @Mark presents in his answer.

$(window).resize( $.debounce( 250, onResize) );

There is an elegant solution using the Underscore.js So, if you are using it in your project you can do the following -

$( window ).resize( _.debounce( resizedw, 500 ) );

This should be enough :) But, If you are interested to read more on that, you can check my blog post - ~~http://rifatnabi.com/post/detect-end-of-jquery-resize-event-using-underscore-debounce~~(deadlink)

How to wait for the 'end' of 'resize' event and only then perform an action?

Related

Recent Posts