如何从resize函数中访问变量值

Question

I have an else..if statement that assigns a value to a variable based on the window.width , what I would like to do is then use this value inside a window.resize but at the moment get 'undefined' for currentSize the value. What should I be doing in order to get the value?

JS

//Code ran onload
if(windowWidth >= 924) {
    incrementValue = 3;
    currentSize = 'desktop';
}
else if(windowWidth > 615 && windowWidth < 924) {
    incrementValue = 2;
    currentSize = 'tablet';
}
else {
    incrementValue = 1;
    currentSize = 'mobile';
}

$(window).resize(function() {
    windowWidth = $(window).width();

    if(windowWidth >= 924) {
        incrementValue = 3;
        var newSize = 'desktop';
    }
    else if(windowWidth > 615 && windowWidth < 924) {
        incrementValue = 2;
        var newSize = 'tablet';
    }
    else {
        incrementValue = 1;
        var newSize = 'mobile';
    }

    console.log(currentSize); //'undefined'
    if (currentSize !== newSize) {
        var currentSize = newSize;

        incrementTotal = 0;
        slideIndex = 0;

        //Reset slider to start
        $carouselSlides.css( 'left', 0 );
    }
});

Answer 1

Don't redefine currentSize with var like this

if (currentSize !== newSize) {
    var currentSize = newSize;

Remove the var

if (currentSize !== newSize) {
    currentSize = newSize;

Here is an example which allows you to reproduce or eliminate your error depending on the presence of var :

• http://jsfiddle.net/94zVg/2/
• http://jsfiddle.net/94zVg/3/

Answer 2

<script>
//global scope
var currentSize = 'desktop', incrementTotal = 0, incrementValue = 0, slideIndex = 0, $carouselSlides = $('#carouselSlides');

function windowResize(windowWidth) {
    var data = [];
    if (windowWidth >= 924) {
        data = ['desktop', 3];
    } else if (windowWidth > 615 && windowWidth < 924) {
        data = ['tablet', 2];
    } else {
        data = ['mobile', 1];
    }
    return data.length ? data : false;
}


$(window).resize(function() {
    var windowWidth = $(this).width();
    var data = windowResize(windowWidth);
    // data[0] = desktop, tablet OR mobile
    // data[1] = 1, 2 OR 3
    incrementValue = data[1];

    if (currentSize !== data[0]) {
        currentSize = data[0];

        incrementTotal = 0;
        slideIndex = 0;

        //Reset slider to start
        $carouselSlides.css('left', 0);
    }    

    // set the style for the current screen size   
});
</script>

Answer 3

Your newSize is out of scope:

$(window).resize(function() {
   windowWidth = $(window).width();
var newSize =0;
   if(windowWidth >= 924){
      incrementValue = 3;
        newSize = 'desktop';
    } else if(windowWidth > 615 && windowWidth < 924) {
      incrementValue = 2;
      newSize = 'tablet';
    } else {
      incrementValue = 1;
      newSize = 'mobile';
    }

    if (currentSize !== newSize) {
      var currentSize = newSize;

      incrementTotal = 0;
      slideIndex = 0;

      //Reset slider to start
      $carouselSlides.css( 'left', 0 );
    }
  });