Before after resize event

Question

I would like to do something before and after resizing element, i have tried to bind resize event and it work:

$('#test_div').bind('resize', function(){
            // do something
});

I have found some questions, but the solutions are timeout, i don't want to use timeout. I would just like to process immediately :)

See also:

JavaScript/JQuery: $(window).resize how to fire AFTER the resize is completed?
jQuery - how to wait for the 'end' or 'resize' event and only then perform an action?

Thank for any suggestions :)

Maybe there's a good reason why that's always the solution.... — Barmar, May 16 '13 at 02:38
How do you do something before resize, you would need telepathic abilities to know when the user is thinking about resizing the window? As for after, most browsers fire the resize event almost continuously, so a timeout is needed to see when the resize event stops firing for a certain time. — adeneo, May 16 '13 at 02:41
@Barmar adeneo Fresheyeball Matthew Blancarte: i would just like to process immediately for my game :) — Rong Nguyen, May 16 '13 at 02:49

score 11 · Accepted Answer · edited May 23 '17 at 11:47

There is no such thing as a resize end event that you can listen to. The only way to know when the user is done resizing is to wait until some short amount of time passes with no more resize events coming. That's why the solution nearly always involves using a setTimeout() because that's the best way to know when some period of time has passed with no more resize events.

This previous answer of mine listens for the .scroll() event, but it's the exact same concept as .resize(): More efficient way to handle $(window).scroll functions in jquery? and you could use the same concept for resize like this:

var resizeTimer;
$(window).resize(function () {
    if (resizeTimer) {
        clearTimeout(resizeTimer);   // clear any previous pending timer
    }
     // set new timer
    resizeTimer = setTimeout(function() {
        resizeTimer = null;
        // put your resize logic here and it will only be called when 
        // there's been a pause in resize events
    }, 500);  
}

You can experiment with the 500 value for the timer to see how you like it. The smaller the number, the more quickly it calls your resize handler, but then it may get called multiple times. The larger the number, the longer pause it has before firing, but it's less likely to fire multiple times during the same user action.

If you want to do something before a resize, then you will have to call a function on the first resize event that you get and then not call that function again during the current resize operation.

var resizeTimer;
$(window).resize(function () {
    if (resizeTimer) {
        clearTimeout(resizeTimer);   // clear any previous pending timer
    } else {
        // must be first resize event in a series
    }
     // set new timer
    resizeTimer = setTimeout(function() {
        resizeTimer = null;
        // put your resize logic here and it will only be called when 
        // there's been a pause in resize events
    }, 500);  
}

Thank a lot for your solution, `timeout` may be the only way to solve that :) — Rong Nguyen, May 16 '13 at 02:52

score 1 · Answer 2 · answered May 16 '13 at 02:44

1

You could use the smart resize jQuery plugin but in the end it still uses setTimeout().

Then again, it won't wait for the end of the resize... it just throttles it.

answered May 16 '13 at 02:44

VVV

7,563
3
34
55

score 1 · Answer 3 · answered Aug 08 '17 at 16:11

You could also try another method.

First create a method to get the active breakpoint (mobile, tablet, desktop, desktop-large) ie Breakpoint.getActive()

Then use an array to save the last two states recorded while resizing.

Example code:

var beforeAfterResize = [];
$(window).resize(function() {

var resizeInfo = Breakpoint.getActive();
if (beforeAfterResize.length > 1) {
    beforeAfterResize[0] = beforeAfterResize[1];
    beforeAfterResize[1] = resizeInfo;
} else {
    beforeAfterResize.push(resizeInfo);
}
console.log(beforeAfterResize);

});

The array called beforeAfterResize will only store two values in positions 0 and 1. If you have more than 2 values, then position 0 takes in the value of position 1 and position 1, the latest value, will retain the current breakpoint info.

This way you will be able to have a before/after comparison without the timeout thingy.

After the resize you will be able to compare values between beforeAfterResize[0] and beforeAfterResize[1] and, if they are different, you can do some actions.

Example: let's say I want to know if after resize i moved from mobile to desktop or large desktop. Then I will use something like this:

    var fromMobile = false;
if ( (( beforeAfterResize[0] === "mobile" ) || ( beforeAfterResize[0] === "tablet" ))  
    && (( beforeAfterResize[1] === "desktop" ) || ( beforeAfterResize[1] === "desktop-large" )) ) {
    fromMobile = true;
}

Let me know if this worked for you.

Thank you, but it's not a problem for me now :) – Rong Nguyen Aug 09 '17 at 07:41 — Rong Nguyen, Aug 09 '17 at 07:41

Before after resize event

3 Answers3

Linked