Javascript 函数开始一次又一次地重复

我一直在开发一个简单的系统，当你按下一个按钮时，它可以在两个不同的场景之间切换

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：

如果这是一个基本的问题或其他什么的话，我真的很抱歉，我对Javascript和JQuery还是相当陌生的，这让我现在很困惑

感谢所有的帮助。

---

谢谢：）

这里的问题是您在

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

---

您可以使用委托事件处理程序来控制这样的操作，这样就不必处理事件绑定

var$container=$（'#container'）.focus（）；
$（document.body）
.on（'keyup'，'#container.game1'，函数（e）{
如果（e.which==49）{
console.log（“游戏1”）；
$container.removeClass（'game1'）.addClass（'game2'）；
}
})
.on（'keyup'，'#container.game2'，函数（e）{
如果（e.which==49）{
console.log（“游戏2”）；
$container.removeClass（'game2'）.addClass（'game1'）；
}
});
#容器{
最小宽度：100vw；
最小高度：100vh；
背景色：rgb（128、128、128）；
}

无论何时调用元素上的
键控
，都会附加另一个事件处理程序。要捕获事件，只需调用一次即可。每次事件发生时，处理该事件的回调函数都会启动。
下面的例子如何：


let game=1；
document.onkeyup=ev=>{
如果（ev.which==49）{
log（`Game${Game}`）；
游戏=游戏===1？2:1；
}
};每次调用任一方法时，都在主体上创建一个新的keyup事件处理程序。这就是你看到重复操作的原因。有什么方法可以防止这种情况发生吗？感谢您不要将关键事件绑定到关键事件中。在关键事件中。在关键事件中。在关键事件中。在关键事件中。在关键事件中。在关键事件中。在关键事件中。关键事件内部。完美。非常感谢：）