设置全局变量并包装在 $(window).load 中

Question

我正在尝试设置一些 Js 变量来计算一些高度和偏移量，但我需要在页面加载后执行此操作 b/c 我有第 3 方广告加载和四处移动。

所以问题：

我得到的是：

var sidebarHeight = $('.sidebar').height(),
    sidebarOffset = $('.sidebar').offset().top;

但是除非我像这样得到它们，否则它们不会被正确设置：

$(window).on('load', function(){
    var sidebarHeight = $('.sidebar').height(),
        sidebarOffset = $('.sidebar').offset().top;
});

但问题是这些变量不是全局变量 - 它们是该函数的局部变量，因此不能被其他函数重用。

那么问题：我怎样才能设置它以便这些变量在 window.load 上设置，但仍然是全局的并且可以被其他函数使用？

Answer 1

全局声明：

var sidebarHeight, sidebarOffset;

本地设置：

$(window).on('load', function(){
    sidebarHeight = $('.sidebar').height();
    sidebarOffset = $('.sidebar').offset().top;
});

它们在声明和设置之间没有值，因此使用它们的其他代码可能需要考虑到这一点。但是如果你需要它们在全局范围内，那么只需在全局范围内声明它们。

Answer 2

全局变量是不好的做法，应该避免！

对于您的问题，将它们设置为全局很容易。您可以将它们附加到 window，如下所示：

$(window).on('load', function(){
    window.sidebarHeight = $('.sidebar').height();
    window.sidebarOffset = $('.sidebar').offset().top;
});

或者，只需全局声明它们：

var sidebarHeight, sidebarOffset;
$(window).on('load', function(){
    sidebarHeight = $('.sidebar').height();
    sidebarOffset = $('.sidebar').offset().top;
});

但是，我强烈建议避免这种情况，并可能考虑在您的项目中使用一些名称间距，如下所示：

var MY_PROJET_NAMESPACE = MY_PROJET_NAMESPACE || {};
$(window).on('load', function(){
    MY_PROJET_NAMESPACE.sidebarHeight = $('.sidebar').height();
    MY_PROJET_NAMESPACE.sidebarOffset = $('.sidebar').offset().top;
});

这将防止全局命名空间污染（您将在全局范围内只有一个全局变量）

Answer 3

我可以想到两种方法来实现它。

第一种方式：您只需在 globalScope 上声明变量，但不分配任何值。然后，在 onLoad 中为它们赋值，就像这样：

var sidebarHeight;
var sidebarOffset;
$(window).on('load', function(){
    sidebarHeight = $('.sidebar').height();
    sidebarOffset = $('.sidebar').offset().top;
});

第二种方式（我最喜欢的）：您可以在 window 对象本身上创建一个额外的属性。由于 window 对象引用将是全局的，因此您的额外属性也是如此。这样做：

$(window).on('load', function(){
    window.sidebarHeight = $('.sidebar').height();
    window.sidebarOffset = $('.sidebar').offset().top;
});

无论您在哪里再次需要该值，都可以阅读 window.sidebarHeight 或 window.sidebarOffset。

希望对您有所帮助。

设置全局变量并包装在 $(window).load 中

Setting global variables and wrap in $(window).load

javascript

variables

global