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

});

我发生的所有事情都非常依赖于跟踪这三个值，而我对滚动事件调用的每个函数所要做的就是重新声明函数中的那些变量。我理解为什么（sorta，我现在不要求我解释它：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语句，用于根据屏幕大小更改滚动功能的行为。这使得整个过程极其重复，因此，我现在有了上面的代码。在这种情况下，我得到一个“未引用的”＆＃39;错误，因为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();
});

使用滚动事件侦听器

1 个答案: