How to most efficiently check for certain "breakpoints" upon browser re-size?

Question

I'm playing with some responsive design that have two breakpoints defined:

Mobile > max-width 320px
Tablet portrait > max-width 767px

On desktop I have a lot of animation + advanced functionality going on with Javascript. On mobile and tablet im looking to simplify and disable both some JS + "re-building" some DOM elements.

Im wondering what the most efficient way to determine certain breakpoints (in terms of width) would be? Im thinking a lot about performance here.

I know I can simply check for the window width upon re-size with something like:

$( window ).resize(function() {
  if ($(window).width() > 320 && $(window).width() < 400) {
    //mobile
  }
  if ($(window).width() > 401 && $(window).width() < 768) {
    //tablet
  }
  if ($(window).width() > 769) {
    //desktop
  }
});

But that seems like a very "expensive" operation?

Any suggestions to lightweight libraries that can be used for this is also very welcome!

Answer 1

I often ran into this problem and have not found the perfect solution. However, there is a workaround that seems less resource hungry. By using a timeout inside your resize() function and constantly clearing it, you can make sure that your code is only run, once the viewport has stopped resizing.

var resizeTimer, width;
var mobile = tablet = desktop = false;

$(window).resize(function() {
    // clear the timeout
    clearTimeout(resizeTimer);

    // execute breakpointChange() once the viewport 
    // has stopped changing in size for 400ms
    resizeTimer = setTimeout(breakpointChange(), 400);
});

function breakpointChange() {
    // use vanillajs window.innerWidth 
    // instead of jQuery $(window).width() as suggested by simon
    width = window.innerWidth;

    if (!mobile && width < 400) {
        tablet = desktop = false;
        mobile = true;
        console.log('is mobile');
    }

    if (!tablet && width > 401 && width < 768) {
        mobile = desktop = false;
        tablet = true;
        console.log('is tablet');
    }

    if (!desktop && width > 769) {
        mobile = tablet = false;
        desktop = true;
        console.log('is desktop');
    }
}
$(window).resize();

This is certainly not the best one can do, but it will prevent that your code is constantly being run. Feel free to add to my answer and/or correct me. Here is a fiddle