Resize event firing multiple times while dragging the resize handle

Question

I was hoping this jQuery plug-in would work, but it didn't:

http://andowebsit.es/blog/noteslog.com/post/how-to-fix-the-resize-event-in-ie (old link was noteslog.com/post/how-to-fix-the-resize-event-in-ie ).

I added a comment to his site, but they're moderated, so you might not see it yet.

But anyhow, let me explain my desire. I want a "resize" type of event to be fired when the user either pauses his resize, and/or completes his resize, not while the user is actively dragging the browser's window resize handle. I have a fairly complex and time consuming OnResizeHandled function I need to run, but not run 100 times just because the user widened the window by 100px and the event was fired for ever pixel of movement. I guess a best bet would be to handle it once the user has completed the resize.

Answer 1

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.

Answer 2

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.