使用滚动事件侦听器声明滚动位置变量

Question

我在使用滚动事件侦听器的视差效果以及各种类型的淡入淡出和调整大小动画方面获得了很多乐趣，有点像这样：

window.addEventListener('scroll', function() {

  var i = window.pageYOffset;
  var w = window.innerWidth;
  var h = window.innerHeight;

  //a bunch of various functions
  //making things move on the page

});

我所做的所有事情几乎都依赖于跟踪这三个值，而我对滚动事件调用的每个函数所做的就是在函数中重新声明这些变量。我理解为什么（排序，只是现在不要让我解释它：P）但我想知道是否有办法重写代码，这样这些变量只需要声明一次，不同的函数就可以拥有无需告诉函数进行自我更新即可访问该数据……这很有意义，对吧？

编辑：更具体地说明我目前的设置方式：

function someFunction() {
  var i = window.pageYOffset;
  var w = window.innerWidth;
  var h = window.innerHeight;

  //things happen
}

function someOtherFunction() {
  var i = window.pageYOffset;
  var w = window.innerWidth;
  var h = window.innerHeight;

  //more things happen
}

window.addEventListener('scroll', function() {
  var i = window.pageYOffset;
  var w = window.innerWidth;
  var h = window.innerHeight;

  someFunction();
  someOtherFunction();
});

当我开始添加所有这些事件时，我最初确实拥有函数所做的所有事情在事件侦听器函数中，在这种情况下我不需要重新声明任何东西，但是随后我到了添加@media 查询的地步，一切都崩溃了。我想出的最佳解决方法是使用一系列 if/else if 语句来根据屏幕大小更改滚动功能的行为。这使得整个过程极度重复，因此，我现在有了上面的代码。在这种情况下，我收到“未引用”错误，因为 i、w 和 h 在事件侦听器调用的函数范围之外声明。

注意：我刚刚尝试过——可能是第四次，但我完全支持三重和四重检查——将这些变量放在顶部，everything 之外也不行。只有当我为每个需要使用的实例重新声明变量时，它才有效。

Answer 1

将变量声明移到函数外，使其成为全局变量。否则，您只能在您声明它们的函数中访问它们。

// variables global now -- yay
// declaring variables here means that they exist past the scroll event handler
var i, w, h;

function someFunction() {
  //things work
}

function someOtherFunction() {
  //more things work
}

window.addEventListener('scroll', function() {
  i = window.pageYOffset;
  w = window.innerWidth;
  h = window.innerHeight;

  someFunction();
  someOtherFunction();
});