Resize event firing multiple times while dragging the resize handle

How about some code like this:

function resizeStuff() {
 //Time consuming resize stuff here
}
var TO = false;
$(window).resize(function(){
 if(TO !== false)
    clearTimeout(TO);
 TO = setTimeout(resizeStuff, 200); //200 is time in miliseconds
});

That should make sure the function only resizes when the user stops resizing.

Borrow some ideas from concurrency solutions to manage the flood of events coming from the browser.

For example, when you first get a resize event, set a flag to true indicating that the user is currently resizing. Set a timeout to call the actual resize event handler after 1 second. Then, whenever this flag is true, ignore the resize event. Then, in the actual handler, once everything is done and correct, set the flag back to false.

That way you only process the latest event once every second (or some other period of time depending on your requirements). If the user pauses in the middle of resizing, it will process. If the user finished, it will process.

This might not be suitable for you, but there are many other ways of using locks that might be more helpful.

Paul Irish has a great Debounced jQuery plugin that solves this problem.