How to use JavaScript OnResize with delay or less processing intensive


Tags: javascript,jquery,css,responsive-design,onresize

Problem :

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?



Solution :

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.


    CSS Howto..

    How to represent dual-cell format in CSS?

    How to cancel CSS effect in Responsive Website Footer menu?

    How do I create a navigation system like that of Lowes.com [closed]

    How to make JS & CSS inline work for eBay template?

    Is it possible to compress LESS CSS files with htaccess? (and how to?)

    How to stop shadow effect from moving using pure css?

    how can i position text to either side of an image in html5

    How to have img popout when containing div is clicked (Image gallery)?

    jQuery - How to improve the logic for toggling inline css and class name while clicking activated buttons and hovering non-activated buttons?

    How to override inline CSS without using !important or javascript?

    how to remove some css attributes defined by bootstrap

    How to make all elements in one line?

    Mojolicious Tests: How to get the input value using css-selectors

    How to make a vertical bar that follows its user in a specific area?

    How to center text vertically in a flex box?

    CSS: How to change tooltip position to align to triggering element (rest of code working)

    Jquery - How to alternate an :Odd :Even pattern every 4 ?

    W3.CSS how to make container centered inside another container

    How to inserted HTML tag from pseudo-element content: [duplicate]

    how to properly use CSS Class and ID [closed]

    How to format a button with in Form tag, html?

    How do I put a scrollable div next to a non-scrollable div using CSS?

    How to make an overlay using css hover on another element and pseudo class ::before

    Border around tr element doesn't show?

    how to use first child in my code?

    How can I create HTML/CSS responsive tile?

    How to show hidden div in the same line as the paragraph text?

    How to fix the heading in html table using css

    How to position two divs on the absolute front of a page, but with one over the other? CSS

    How to get rid of text form borders in Chrome and Firefox?