Question

我有一个看起来像这样的脚本：

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

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

控制台不会显示oldWidth的任何内容。

我试图摆脱var，使用＆＃34; $＆＃34;，将变量移到函数外部，因为我在这里阅读但是我无法让控制台显示oldWidth。

我需要更改什么以及在何处需要更改它以使currentWidth成为一个全局变量，每次调用onResize时都可以将oldWidth与其先前的值一起提供？

谢谢。

Answer 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 plugin这样的东西。

进一步的答案

看起来您可能尝试在javascript中仅定位特定的浏览器宽度。我会建议类似下面的内容，它将触发事件并允许全局可检查变量（屏幕大小基于bootstrap的默认响应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();
});

通过事件保留的jQuery全局变量

1 个答案: