Firing resize event only when resizing is finished

jQuery resize event is fired when the size of the browser window changes as pointed out in jQuery documentation.

Sometimes we need to execute functions which might take a while to execute or which might take much resources from the machine and we don’t want to execute them tents of times while the user is re-sizing the window until reaching the desired size.

For this cases we can use a very simple trick:

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


function doneResizing(){
    //whatever we want to do 
}

Living demo: http://jsfiddle.net/Zevan/c9UE5/1/

Basically what we do in this case is adding a timeout of 500 milliseconds to call our function `doneResizing`.
This counter of 500 milliseconds is restarted with every change in the window dimensions (as we clear the timeout) so the function will only be called if the user stops resizing the window OR if the user resizes the window VERY slowly, which is very unlikely