如何在 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

sizes 在

文档 onReady 函数执行时没有与之关联的值。 事实上，在您的 onResize 函数执行之前，它不会有值。

Answer 2

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

但是，如果您的视口宽度正好是 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';
    });
});​

请注意，代码的第一部分不会真正适用于您使用它的方式，因为该值在加载文档时传递给 anythingSlider，并且在调整窗口大小时不会更改（它是一个值而不是引用）。第二部分也不能解决这个问题，但是在窗口中重复代码.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
    });
});​

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