如何在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
    });

});​

我假設（並希望）您以后也會使用尺寸？