Question

I have some script similar to the following:

var breakpoints = [0,240,480,960,9999],
    bpCount = breakpoints.length,
    windowsize = 0;

window.onresize = function() {

    windowsize = document.body.clientWidth;

    for(var i=0; i<bpCount; i++) {
        if(windowsize >= breakpoints[i] && windowsize < breakpoints[i+1]) {
            doSomething(breakpoints[i]);
            break;
        }
    }    

};

However this seems to run pretty slowly, even in Chrome on a decent PC, and even when ‘doSomething’ is just performing a ‘console.log’, so I was just wondering if there was any better way of checking whether the screen size is between two values as it resizes?

Thanks

Answer 1

Don’t poll for the size every single time. You’re using way too much computing power.

Instead, make a timer and check for the size every so often (10 ms might be too fast):

var checkWindowSizeTimer;

function checkWindowSize() {
    var windowsize = document.body.clientWidth;

    if (windowsize >= breakpoints[i] && windowsize < breakpoints[i+1]) {
        doSomething(breakpoints[i]);
        clearInterval(checkWindowSizeTimer);
    }
}

window.onresize = function() {
  checkWindowSizeTimer = setInterval(checkWindowSize, 10);
}

When the window is resized past your bounds, the timer exits.