Keydown неоднократно вызывает.Можно ли этого избежать?

Question

Как я могу отредактировать этот код, чтобы функция functForward запускалась только один раз при нажатии и удерживании клавиши?

Проблема заключается в том, что при удерживании клавиши функция будет запускаться неоднократно и что-то вродеошеломляет случается.Это приведет к продолжению functForward спустя долгое время после того, как я отпущу ключ.

Любой ввод приветствуется.

    var addEvent = document.addEventListener ? function(target, type, action) {
      if (target) {
        target.addEventListener(type, action, false);
      }
    } : function(target, type, action) {
      if (target) {
        target.attachEvent('on' + type, action, false);
      }
    }

    addEvent(document, 'keydown', function(e) {
      e = e || window.event;
      var key = e.which || e.keyCode;
      if (key === 87) {
        functForward();
      }
    });
    addEvent(document, 'keyup', function(e) {
      e = e || window.event;
      var key = e.which || e.keyCode;
      if (key === 87) {
        functStopDrive();
      }
    });

Answer 1

"Как я могу отредактировать этот код, чтобы функция functForward запускалась только один раз при нажатии и удерживании клавиши?"

Все современные браузеры поддерживают addEventListener(), поэтому attachEvent() не требуется, если вы не собираетесь делать свое собственное событие.Вкратце: не просто редактируйте код, который вы имеете, используйте что-то более упорядоченное и более простое для понимания.

Функции funcForward и funcStopDrive не определены в предоставленном коде, невозможно редактировать код вокруг неизвестной функциипытаясь отредактировать код, чтобы заставить работать неизвестные функции.

Еще раз удерживая клавишу, таинственная функция X делает что-то, когда клавиша удерживается нажатой.Как можно измерить это в параметре расстояния, времени или состояния, не имея ни малейшего понятия, что делает функция X и как она выполняется?

В следующей демонстрации:

• Есть 3 события и 3 обработчика событий.У каждого из них есть свой класс с анимированными стилями.

• Убедитесь, что тестовая область сфокусирована (щелкните в любом месте области, чтобы сделать это).

• просто нажмите пробел .

• Попробуйте нажать пробел один раз, когда струя наполовину коснитесь пробела сноваэто выглядит круто.

Демо

var jet = document.querySelector('.fa-fighter-jet');

document.addEventListener('keydown', climb)
document.addEventListener('keypress', cruise);
document.addEventListener('keyup', dive);

jet.focus();

function climb(e) {
  var key = e.which || e.keyCode;
  if (key === 32) {
    jet.classList.toggle('up');
  }
}

function cruise(e) {
  var key = e.which || e.keyCode;
  if (key === 32) {
    jet.classList.toggle('go');
  }
}

function dive(e) {
  var key = e.which || e.keyCode;
  if (key === 32) {
    jet.classList.toggle('down');
  }
}

.fa {
  display: block;
  
}

.up {
  transform: translate(500px, -200px);
  transition: .75s ease-in;
}

.go {
  transform: translateX(500px);
  transition: .75s ease-out;
}

.down {
  transform: translate(500px, 200px);
  transition: .75s ease-in;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />


<i class='fa fa-fighter-jet fa-2x'></i>