jQuery global variable that remains through events

Question

I have a script that looks like this:

onResize = function() {
    ...
    var oldWidth=currentWidth;
    var currentWidth=$('.myDiv').width();
    console.log('The value changed from '+oldWidth+' to '+currentWidth)
}

$(window).bind('resize', onResize);

The console won't display anything for the oldWidth.

I tried to get rid of the var, to use "$", to move the variable outside the function as I read around here but I just can't get the console to display the oldWidth.

What do I need to change and where do I need to change it in order to get the currentWidth to be a global variable that could feed the oldWidth with its previous value each time the onResize is called?

Thank you.

Answer 1

Try either adding the the variables to the global scope. For example:

// initialise variables in the global scope
var oldWidth, currentWidth;

onResize = function() {
    oldWidth=currentWidth;
    currentWidth=$('.myDiv').width();
    console.log('The value changed from '+oldWidth+' to '+currentWidth)
}

$(window).bind('resize', onResize);

$(window).load(function () {
    // set initial values on window load
    oldWidth = currentWidth = $('.myDiv').width();
});

JS Fiddle

A word of caution though. It is probably worth looking at throttling your resize events (some browsers trigger resizes very quickly and this can cause some to crash if you're doing particularly heavy lifting on the front end). Have a look at something like Ben Almans Throttle/Debounce jQuery plugin.

FURTHER ANSWER

It looks like you might be trying to target just specific browser widths in javascript. I would suggest something like the following, that will both trigger events and allow for a global checkable variable (screensizes are based off bootstrap's default responsive css)

JSFiddle

$(function(){
    onResize = function() {
        if($(window).width() < 768 && !window.screenSizes.isMobile){
            window.screenSizes = {
                "isMobile" : true,
                "isTablet" : false,
                "isSmallDesktop" : false,
                "isLargeDesktop" : false
            };
            // fire event for change to mobile
            $(window).trigger('toMobile');
            console.log($(window).width());
            console.log(window.screenSizes);
        }
        if($(window).width() >= 768 && $(window).width() < 992 && !window.screenSizes.isTablet){
            window.screenSizes = {
                "isMobile" : false,
                "isTablet" : true,
                "isSmallDesktop" : false,
                "isLargeDesktop" : false
            };
            // fire event for change to tablet
            $(window).trigger('toTablet');
            console.log($(window).width());
            console.log(window.screenSizes);
        }
        if($(window).width() >= 992 && $(window).width() < 1200 && !window.screenSizes.isSmallDesktop){
            window.screenSizes = {
                "isMobile" : false,
                "isTablet" : false,
                "isSmallDesktop" : true,
                "isLargeDesktop" : false
            };
            // fire event for change to small desktop
            $(window).trigger('toSmallDesktop');
            console.log($(window).width());
            console.log(window.screenSizes);
        }
        if($(window).width() >= 1200 && !window.screenSizes.isLargeDesktop){
            window.screenSizes = {
                "isMobile" : false,
                "isTablet" : false,
                "isSmallDesktop" : false,
                "isLargeDesktop" : true
            };
            // fire event for change to large desktop
            $(window).trigger('toLargeDesktop');
            console.log($(window).width());
            console.log(window.screenSizes);
        }
    }

    // example check inside other function
    onSomethingElse = function (){
        if(window.screenSize.isMobile){
            // do somethingelse specifically for mobile
        }
    }

    function attachEvents (){
        // Ben Alman's throttler to stop function spam during resize
        // benalman.com/projects/jquery-throttle-debounce-plugin/
        $(window).resize( $.throttle(350, onResize) );

        // example function triggered when go to mobile
        $(window).on('toMobile', function (){
            // unload slideshow etc.
        });
    }

    function initialize(){
        // initialise variables in the global scope
        window.screenSizes = {
            "isMobile" : false,
            "isTablet" : false,
            "isSmallDesktop" : false,
            "isLargeDesktop" : false
        };

        // bind events to elements
        attachEvents();

        // trigger initialization of resize variables
        onResize();
    }

    initialize();
});