How to Wait For the 'End' of 'Resize' Event and Only Then Perform an Action

How to wait for the 'end' of 'resize' event and only then perform an action?

I had luck with the following recommendation: http://forum.jquery.com/topic/the-resizeend-event

Here's the code so you don't have to dig through his post's link & source:

var rtime;
var timeout = false;
var delta = 200;
$(window).resize(function() {
    rtime = new Date();
    if (timeout === false) {
        timeout = true;
        setTimeout(resizeend, delta);
    }
});

function resizeend() {
    if (new Date() - rtime < delta) {
        setTimeout(resizeend, delta);
    } else {
        timeout = false;
        alert('Done resizing');
    }               
}

Thanks sime.vidas for the code!

Wait for the window to complete resizing itself, and then do something in Angular

Here is a method for accomplishing this:

var resizeTimeout;

appWindow.bind('resize', function() {
    clearTimeout(resizeTimeout);
    resizeTimeout = setTimeout(function() {
        // when the window stops resizing, this function will execute
    }, 200);
});

Basically, when the event fires it clears the existing timeout and then sets a timeout. When the window has stopped resizing, the last timeout created from the setTimeout call is not cleared, and therefore executes after the specified duration in milliseconds.

Before after resize event

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);  
}

Detect when the resize event has finished

Basically what you need to do is set up a timer that will count time after last Event.RESIZE. Once enough time has passed (like, 50ms or so), you can assume, that the user has stopped continuous resizing of the stage. This code can simulate what you need:

private var timer:Timer;
private var resizeInterval:Number = 50; //amount of time you believe is enough to say that continuous resizing is ended after last discrete Event.RESIZE

private function init():void
{
  timer = new Timer(resizeInterval);
  timer.addEventListener(TimerEvent.TIMER, timerHandler);
  stage.addEventListener(Event.RESIZE, resizeHandler);
}

private function resizeHandler(e:Event):void
{
  if (timer.running) {
    timer.reset();
  }
  timer.start();
}
private function timerHandler(e:Event):void
{
  timer.stop();
  resizeCompletehandler();
}

Before after resize event

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);  
}

---

Related Topics