jQuery – how to wait for the ‘end’ of ‘resize’ event and only then perform an action?

jQuery – 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?

Solutions/Answers:

Solution 1:

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!

Solution 2:

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.

Solution 3:

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!

Related:  How to generate call-graphs for given javascript? [closed]

Solution 4:

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,

Solution 5:

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)

Solution 6:

You can store a reference id to any setInterval or setTimeout. Like this:

var loop = setInterval(func, 30);

// some time later clear the interval
clearInterval(loop);

To do this without a “global” variable you can add a local variable to the function itself. Ex:

$(window).resize(function() {
    clearTimeout(this.id);
    this.id = setTimeout(doneResizing, 500);
});

function doneResizing(){
  $("body").append("<br/>done!");   
}