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.

Answer 3

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

Answer 4

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/

Answer 5

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 6

I extended some days ago the default jQuery on-event-handler. It attach an event handler function for one or more events to the selected elements if the event was not triggered for a given interval. This is useful if you want to fire a callback only after a delay, like the resize event, or else. https://github.com/yckart/jquery.unevent.js

;(function ($) {
    var methods = { on: $.fn.on, bind: $.fn.bind };
    $.each(methods, function(k){
        $.fn[k] = function () {
            var args = [].slice.call(arguments),
                delay = args.pop(),
                fn = args.pop(),
                timer;

            args.push(function () {
                var self = this,
                    arg = arguments;
                clearTimeout(timer);
                timer = setTimeout(function(){
                    fn.apply(self, [].slice.call(arg));
                }, delay);
            });

            return methods[k].apply(this, isNaN(delay) ? arguments : args);
        };
    });
}(jQuery));

Use it like any other on or bind-event handler, except that you can pass an extra parameter as a last:

$(window).on('resize', function(e) {
    console.log(e.type + '-event was 200ms not triggered');
}, 200);

http://jsfiddle.net/ARTsinn/EqqHx/

Answer 7

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.