如何在javascript中访问全局变量？

Question

考虑以下示例：

/**/
var sizes;

$(window).resize(function() {

    var viewportWidth = $(window).width();
    //var viewportHeight = $(window).height();
    if (viewportWidth > 1024) {
        sizes = '320';
    } else if (viewportWidth < 1024) {
        sizes = '300';
    }
}); /**/

jQuery(document).ready(function($) {
    console.log(sizes);
    $('#full_width_anything_slider').anythingSlider({
        delay: sizes
    });

});​

我如何在另一种方法中访问sizes var？

现在不起作用

谢谢

Answer 1

文件onReady函数执行时， sizes没有与其关联的值。 实际上，在您的onResize函数执行之前，它将没有值。

Answer 2

只要发布的代码未包装在函数中，您的声明就是全局的。

但是，如果您的viewportWidth恰好是1024个尺寸，则永远不会设置。 因此请执行以下操作：在调用resize之前， sizes将没有值，因此在声明值时设置该值，并在调整窗口大小时将其重置

var sizes = $(window).width() <= 1024 ? '300' : '320';
$(window).resize(function() {
    var viewportWidth = $(window).width();
    sizes = $(window).width() <= 1024 ? '300' : '320';
}); 

请注意，一般而言，全局变量是个坏主意。 就您而言，您也可以这样做

$(function() {
    $('#full_width_anything_slider').anythingSlider({
        delay: $(window).width() <= 1024 ? '300' : '320';
    });
});​

请注意 ，代码的第一部分将无法真正使用您的使用方式，因为在加载文档时，该值将传递给everySlider，并且在调整窗口大小时该值将不会更改（它是一个值，而不是引用）。 第二部分也不会解决此问题，而是在window.resize中重复如下代码将

var setupSlider = function()
    $('#full_width_anything_slider').anythingSlider({
        delay: $(window).width() <= 1024 ? '300' : '320';
    });
});​
$(function(){
    setupSlider();
});
$(window).resize(setupSlider);

Answer 3

您正确地声明了一个全局变量，但是您要传递给anythingSlider的滑块是值的快照，而不是对包含该值的变量的引用。 改变全局变量不会改变的延迟anythingSlider ，除非你用新值，每次重新初始化anythingSlider你改变它（在调整大小）

无论如何，它不必是全球性的。

$(window).resize(function() {
    var sizes = '0';
    var viewportWidth = $(window).width();
    //var viewportHeight = $(window).height();
    if (viewportWidth >= 1024) {
        sizes = '320';
    } else if (viewportWidth < 1024) {
        sizes = '300';
    }
    $('#full_width_anything_slider').anythingSlider({
        delay: sizes
    });
});
$(document).ready(function(){
    $(window).trigger("resize");
});

请注意，但是我找不到有关重新初始化此插件或更改其选项的任何文档，我不确定这是否是重新初始化它的正确方法。

Answer 4

这不是很好的做法...但是：

/**/
$(window).resize(function() {
    updateSize();
}); /**/

function updateSize() {
    var viewportWidth = $(window).width();
    //var viewportHeight = $(window).height();
    if (viewportWidth > 1024) {
        sizes = '320';
    } else if (viewportWidth <= 1024) {
        sizes = '300';
    }
}    

jQuery(document).ready(function($) {
    updateSize();
    console.log(sizes);
    $('#full_width_anything_slider').anythingSlider({
        delay: sizes
    });

});​

我假设（并希望）您以后也会使用尺寸？