javascript - 函数开始一遍又一遍地重复

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，然后在再次按 1 键后显示游戏 2，然后在按 1 时重复此操作。

实际行为 - 它执行了几次预期的行为，然后开始一遍又一遍地重复 1 和 2，直到它滞后于浏览器。

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

如果这是一个基本问题或其他问题，我真的很抱歉，我对 Javascript 和 JQuery 还很陌生，目前这确实让我感到困惑。

感谢所有帮助。谢谢:)

Answer 1

这里的问题是，您在 keyup 回调中递归地重新绑定(bind) keyup 事件，因此最终会破坏浏览器。

您需要做的是从两个函数中获取keyup绑定(bind)代码:

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");
}