Объявление переменных положения прокрутки с помощью прослушивателя события прокрутки

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, чтобы изменить поведение функций прокрутки в зависимости от размера экрана.Это сделало все процессы ЧРЕЗВЫЧАЙНО повторяющимися, таким образом, теперь у меня есть вышеуказанный код.В этом случае я получаю ошибку «Unreferenced», потому что 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();
});