Как установить прослушиватель событий внутри al oop, используя замыкания - PullRequest
Новая
       19

Как установить прослушиватель событий внутри al oop, используя замыкания

0 голосов
/ 10 февраля 2020 
thisKey.addEventListener(
  'mousedown',
  (function(_temp) {
    return function() {
      fnPlayKeyboard({
        keyCode: _temp
      });
    }
  })(reverseLookup[n + ',' + i])
);

Увидел эту строку кода, и я запутался, как работает функция во втором параметре addEventListener. Я знаю, что общая цель - воспроизвести правильный звук при нажатии клавиши на клавиатуре.

В остальной части кода fnPlayKeyboard принимает событие e в качестве параметра и воспроизводит ноту на основе e. ключевой код. reverseLookup должен искать keyCode с учетом ноты musi c, которая здесь представлена ​​n + ',' + i.

Я предполагаю, что код каким-то образом переводит событие mousedown в событие keydown, но не уверен как он это делает. Особенно меня смущает синтаксис, потому что в качестве второго параметра addEventListener используется double () ().

1 Ответ

2 голосов
/ 10 февраля 2020

Эта функция вызывается немедленно и возвращает другую функцию. Эта возвращаемая функция затем назначается слушателем mousedown.

Это может быть настолько запутанным из-за попытки создать переменную в области функций _temp, чтобы выйти из проблема замыкания внутри петель. Если ES2015 разрешен, это будет гораздо яснее. Код эквивалентен: 

// ES2015
const keyCode = reverseLookup[n + ',' + i];
thisKey.addEventListener('mousedown', () => {
  fnPlayKeyboard({ keyCode });
});

. Для получения * требуется переменные n и i, какими бы они ни были, и поиск их по reverseLookup, который, предположительно, является объектом. 1012 *. Затем, когда thisKey получает событие mousedown, он вызывает fnPlayKeyboard с объектом с этим keyCode.

Код не обязательно эквивалентен 

// Pre-ES2015
var keyCode = reverseLookup[n + ',' + i];
thisKey.addEventListener('mousedown', function() {
  fnPlayKeyboard({ keyCode: keyCode });
});

, потому что, если код находится внутри al oop, для keyCode будет только одна привязка (которая будет конечным значением, присвоенным ему на последней итерации l oop): 

// Pre-ES2015
for (var i = 0; i < 10; i++) {
  var keyCode = reverseLookup[n + ',' + i];
  thisKey.addEventListener('mousedown', function() {
    fnPlayKeyboard({ keyCode: keyCode });
  });
}

Приведенный выше код не будет работать должным образом, но исправление его путем объявления переменной с const вместо этого разрешено только в средах ES2015 +. В более старых средах немедленный вызов анонимного (function(_temp) { return function() { в addEventListener является одним из способов убедиться, что у слушателя будет правильный keyCode при вызове, путем создания переменной области действия (параметр _temp) только для этот слушатель.

...