javascript 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://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 setting a timeout for when the user pauses the resize? Reset the timeout when resizing occurs, or fire the resize event handler if the timeout expires.

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.

Answer 3

Since it's built in jQuery, can't you bind some kind of onComplete event to the extension and pass a function that should be executed when it's called?

Edit:

When the user starts resizing the window, set an interval that watches the window's dimensions. If the dimensions haven't changed in a pre-set time period of your specification, then you can consider the window resizing "completed". Your javascript function of choice in this would be setInterval(), which accepts two arguments - a function to call each tick, and how long each tick takes in milliseconds.

As to how to write that specifically within the jquery framework, well, I don't know enough about jquery to be able to tell you that. Perhaps someone else can help you more specifically, but at the same time you may consider extending the jquery extension you already linked with an onComplete event that works like I just described.

Answer 4

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.