Функция начинает повторяться снова и снова

Question

Я разрабатывал простую систему, которая должна переключаться между двумя различными сценами при нажатии кнопки.

gameOne();

var game = 1;

function gameOne() {
  game = 1;
  console.log("Game 1");
  $( "body" ).keyup(function( event ) {
        if ( event.which == 49 && game == 1) { // Number 1 key
           gameTwo(); 
        }
  });
}

function gameTwo() {
  game = 2;
  console.log("Game 2");
  $( "body" ).keyup(function( event ) {
    if ( event.which == 49 && game == 2) { // Number 1 key
        gameOne();
    } 
  });
}

Ожидаемое поведение - я хочу сказать «Игра 1» после нажатия кнопки1, а затем Game 2 после повторного нажатия клавиши 1, а затем повторите это, когда я нажимаю 1.

Фактическое поведение - оно выполняет ожидаемое поведение несколько раз, а затем начинает повторять 1 и 2 снова иснова и снова, к тому же он отстает от браузера.

JSFiddle: https://jsfiddle.net/a0npotm8/10/

Мне очень жаль, если это основной вопрос или что-то еще, я все еще довольно плохо знаком сJavascript и JQuery, и это действительно сбивает меня с толку.

Вся помощь приветствуется.Спасибо:)

Answer 1

что-то вроде:

let game = 1;
document.onkeyup = ev => {
  if (ev.which === 49) {
    console.log(`Game ${game}`);
    game = game === 1 ? 2 : 1;
  }
};

это решит вашу проблему?

Answer 2

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

var $container = $('#container').focus();

$(document.body)
  .on('keyup', '#container.game1', function(e){
    if (e.which == 49) {
      console.log('Game 1');
      $container.removeClass('game1').addClass('game2');
    }
  })
  .on('keyup', '#container.game2', function(e){
    if (e.which == 49) {
      console.log('Game 2');
      $container.removeClass('game2').addClass('game1');
    }
  });

#container {
  min-width: 100vw;
  min-height: 100vh;
  background-color: rgb(128, 128, 128);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container" class="game1" tabindex="0">
</div>

Эта логика создает два разных обработчика события делегата для тела. Оба отфильтровывают события для дочернего элемента #container тела, но также фильтруют на основе дополнительного класса в контейнере; game1 и game2. В зависимости от того, к какому классу относится элемент, будет обрабатываться только один из обработчиков событий.

Answer 3

Каждый раз, когда вы вызываете keyup для элемента, вы присоединяете другой обработчик событий.Чтобы ловить события, вам нужно позвонить только один раз.Функции обратного вызова, которые обрабатывают событие, будут срабатывать каждый раз, когда происходит событие.

Answer 4

Проблема здесь в том, что вы рекурсивно привязываете событие keyup в обратном вызове keyup, поэтому оно завершается сбоем браузера.

Вам нужно получить код привязки keyup из двух функций:

gameOne();

var game = 1;

$("body").keyup(function(event) {
  if (event.which == 49 && game == 1) { // Number 1 key
    gameTwo();
  } else if (event.which == 49 && game == 2) { // Number 1 key
    gameOne();
  }
});


function gameOne() {
  game = 1;
  console.log("Game 1");
}

function gameTwo() {
  game = 2;
  console.log("Game 2");
}