Search code examples
jqueryresizewindowjquery-events

Resize event firing multiple times while dragging the resize handle


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.


Solution

  • If you are into libraries, you should checkout underscore, underscore already handles your need and many more you will probably have in your projects.

    here is an example of how underscore debouncer works:

    // declare Listener function
    var debouncerListener = _.debounce( function(e) {
    
        // all the actions you need to happen when this event fires
    
    }, 300 ); // the amount of milliseconds that you want to wait before this function is called again
    

    then just call that debouncer function on the resize of the window

    window.addEventListener("resize", debouncerListener, false);
    

    checkout all the underscore functions available here http://underscorejs.org/