How can I prevent an event from firing until someone has actually stopped re-sizing the window?

Question

When someone continuously drags a window around, resizing it (by the corner for example) and until they stop(let go of mouse button), that's when the function should fire.

I tried this, I noticed that the setTimeout always fires every time that you keep dragging the window(without letting go), I had hoped that the reset would work, but it's not working at the moment.

<script>

            var $window = $(window),
                timer   = 0;



            $window.resize(function() {

                // reset timer
                timer = 50;

                setTimeout(function() {

                    alert('client has stopped re-sizing the window');

                }, timer);

            });

        </script>

I would have thought that this makes sense as you continuously drag the window around, the setTimeout event keeps firing multiple times until you let go, it may have fired a hundred times(have to click a lot)... I only want it to fire when the person finally lets go, regardless of how long they've been dragging the window around changing its size.

I'm sure one of the other posts will have it, but what you are looking for is David Walsh's debounce explanation https://davidwalsh.name/javascript-debounce-function — JonSG, Jun 03 '16 at 20:24
@JonSG sorry I actually use throttle/debounce already on other stuff, that's not what I was looking for here. I need the start/stop points which I don't know how far apart that might be. The throttle/debounce if I understand correctly works on a pre-defined interval, but I did not specify that, it occurred to me later today about also using debounce/throttle to limit the times resize fired. — joehungjohn, Jun 04 '16 at 08:18
I don't think you can work on the assumption that a resize operation can be normalized into a single start/stop event because both in terms of user activity and browser mechanics it will always be a stream of events. If you are trying to avoid intermittent layout redraws you will come unstuck if the user starts residing immediately after you think they've stopped... — A Macdonald, Jun 04 '16 at 08:29

score 1 · Answer 1 · answered Jun 03 '16 at 20:25

1

You could use lodash's debounce function which is precisely for limiting the number of events acted upon https://lodash.com/docs#debounce , from their example:

jQuery(window).on('resize', _.debounce(calculateLayout, 150));

you can import it as a standalone npm module if you don't want the lodash library https://www.npmjs.com/package/lodash.debounce

answered Jun 03 '16 at 20:25

A Macdonald

814
1
7
10

Thanks for the suggestion on throttle/debounce, I actually already use these for scroll-triggered events. The problem here is that I don't know how long the user might be dragging the window for. Although I will still implement the debounce, thanks. – joehungjohn Jun 04 '16 at 08:17

score 0 · Answer 2 · answered Jun 03 '16 at 20:20

0

Answer at http://alvarotrigo.com/blog/firing-resize-event-only-once-when-resizing-is-finished/.

var resizeTimer;

$(window).on('resize', function(e) {

  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(function() {

    alert('client has stopped re-sizing the window');

  }, 250);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

answered Jun 03 '16 at 20:20

IMTheNachoMan

5,343
5
40
89

Ah nice I came across that clearTimeout as well, call back. Thanks this might be just what I needed. Not sure if throttle/debounce is redundant but I'll try to implement both. – joehungjohn Jun 04 '16 at 08:19
Out of curiosity is that e/event necessary? – joehungjohn Jun 04 '16 at 08:27
This seems to be working great, thank you. – joehungjohn Jun 04 '16 at 08:38
Unfortunately this doesn't actually work, I know it seems insane, but it works up to 250ms, but if you keep dragging/resizing around for a longer period that that, you'll see that the alert fires numerous times. I know it seems insane to even care about the very small chance that someone would want to drag a window around re-scaling it randomly to try and break it. For my particular application, this would break my application. So I'll have to find another way, this is a very widely accepted response, however I think it doesn't take into account the possibility of a very long re-scale time. – joehungjohn Jun 05 '16 at 01:16
I think I'll add a timer that if the person still hasn't let go of the browser say in 240ms, add another 250ms, to the count down. – joehungjohn Jun 05 '16 at 01:17

How can I prevent an event from firing until someone has actually stopped re-sizing the window?

2 Answers2