Глобальная переменная jQuery, которая остается в событиях

0

У меня есть сценарий, который выглядит так:

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

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

Консоль ничего не отобразит для oldWidth.

Я попытался избавиться от var, чтобы использовать "$", чтобы переместить переменную вне функции, когда я читаю здесь, но я просто не могу заставить консоль отображать oldWidth.

Что мне нужно изменить и где мне нужно изменить его, чтобы получить текущую ширину в качестве глобальной переменной, которая может кормить oldWidth с его предыдущим значением каждый раз, когда вызывается onResize?

Спасибо.

Теги:
global-variables

1 ответ

1
Лучший ответ

Попробуйте либо добавить переменные в глобальную область. Например:

// 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

Однако слово осторожности. Вероятно, стоит обратить внимание на то, чтобы изменить ваши события изменения размера (некоторые браузеры вызывают изменение размеров очень быстро, и это может привести к сбою некоторых из них, если вы делаете особенно тяжелый подъем на переднем конце). Посмотрите на что-то вроде Ben Almans Throttle/Debounce плагин jQuery.

ДАЛЬНЕЙШИЙ ОТВЕТ

Похоже, вы пытаетесь настроить только определенные ширины браузера в javascript. Я хотел бы предложить что-то вроде следующего: это будет инициировать события и разрешить глобальную проверяемую переменную (экраны основаны на исходной загрузке 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 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();
});
  • 0
    Спасибо. Странно: я делал это несколько раз, не заставляя его работать, и теперь, когда я делаю это снова, это работает. Должно быть, я сделал что-то не так. Вероятно, событие загрузки, которое я не добавил, дало мне пустую переменную для начала. Спасибо.
  • 0
    пожалуйста, я отредактировал свой ответ, чтобы включить предложение по регулированию, которое может быть полезно для вас. Кроме того, не забудьте принять ответ, чтобы другие могли найти правильный ответ, если они ищут :)
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню