2

Im trying to write a JavaScript/jQuery function that I can use to call other functions, or set CSS/LESS based on if the user resizes a window beyond breakpoint thresholds, or if they rotate a device from landscape to portrait.

Currently I am using the following:

$(window).on('resize', function() {
// IF/Switch Case statement, check current width of window is > mobile, or tablet, or desktop
    // Do stuff depending on which size the window is at currently.
// End if/Switch case.
}

But this is not ideal, as it will inevitably put strain/delay on the user experience, as the function could literally be running loads of times while a user is dragging the window bigger and smaller.

Instead, is there a way to just fire on change of breakpoints, or maybe even running onResize every 1 or 2 seconds, or once a user has stopped dragging the window maybe?

That way, the processing intensity would be considerably less.

P.s. when I say breakpoints, I mean I have width settings for Mobile, BigMobile, Tablet, Retina Displays, Tablet.

But just simply mobile, tablet, desktop can be a compromise too.

How can I detect breakpoint changes without causing intensive processing onResize. Any tips on which direction to go with this?

redfox05
  • 3,354
  • 1
  • 34
  • 39
  • Resize after stopped dragging http://stackoverflow.com/questions/2854407/javascript-jquery-window-resize-how-to-fire-after-the-resize-is-completed and/or use CSS media query for breakpoints http://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile – Spokey Sep 19 '14 at 13:49
  • Depending on the library you're using, there may be a throttle() or debounce() function that will make this child's play. – wwwmarty Sep 19 '14 at 13:53
  • thanks, spokey and marty, I'll look into those threads and functions – redfox05 Sep 19 '14 at 15:19
  • Spokey, any idea how the solutions in your first link compare to Mauro's answer below? – redfox05 Sep 20 '14 at 22:10

1 Answers1

4

Use a setTimeout and a clearTimeout.

var t = null;

window.onResize(function() {
   if (t!= null) clearTimeout(t);

   t = setTimeout(function() {
       ...
   }, 500);
}}

During the dragging the timeout is Always cleared and nothing happen. But when the user stop dragging it run the last setTimeout and will execute your code.

Mauro Valvano
  • 903
  • 1
  • 10
  • 21
  • interesting, still trying to get my head around how this is working exactly, but I'll give it some time to sink in – redfox05 Sep 19 '14 at 15:21
  • Basically when you drag the window, a timeout object is created. But when you continue dragging the window, the event is fired again, and will clear the timeout previous created and create a new one, so nothing is called (created, destroyed, created, destroyed...) but when you finish the drag, the timeout is not cleared again and it will fire. – Mauro Valvano Sep 19 '14 at 15:47
  • ahh, I think I undrstand now. Would you be able to tell me how this compares to the two solutions given in the link Spokey gave (http://stackoverflow.com/questions/2854407/javascript-jquery-window-resize-how-to-fire-after-the-resize-is-completed), specifically, answers from CMS and brahn. Not quite sure which is best – redfox05 Sep 20 '14 at 22:09