javascript - 使用滚动事件监听器声明滚动位置变量

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 声明在被调用函数的范围之外事件监听器。

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

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();
});