Javascript中的循环函数

Javascript中的循环函数,javascript,function,Javascript,Function,我和我的朋友正在做一个游戏。这是一个简单的基于文本的游戏,有点像俄勒冈小径。你按一个键做不同的事情,然后按一个键转到下一个回合,这就是问题出现的地方。按“下一个转弯”可重新运行整个转弯功能。但在第二次转弯时,一切都会重复两次;然后四次,;然后是八个,;等等 <html> <script> function game() { document.addEventListener("keypress", function(event) { if (even

我和我的朋友正在做一个游戏。这是一个简单的基于文本的游戏,有点像俄勒冈小径。你按一个键做不同的事情,然后按一个键转到下一个回合,这就是问题出现的地方。按“下一个转弯”可重新运行整个转弯功能。但在第二次转弯时,一切都会重复两次;然后四次,;然后是八个,;等等

<html>
<script>
function game() {

document.addEventListener("keypress", function(event) {
if (event.keyCode == 50){
alert('you took your turn')

 }else if (event.keyCode == 49) {
    alert('Proceeding to next turn.');
    game()
  }
});
}

</script>
<button onclick="game()">game</button>
</html>

函数游戏(){
文档.添加的事件列表器(“按键”,功能(事件){
如果(event.keyCode==50){
警惕(“轮到你了”)
}else if(event.keyCode==49){
警报(“继续下一个转弯”);
游戏()
}
});
}
游戏

我们非常缺乏经验,我们不知道如何阻止它循环。代码有什么问题。

问题是每次调用函数
game()
时,您都在订阅
keypress
事件:

似乎不需要在按键订阅中调用
game()
。如果删除它,所描述的行为将消失

此外,您应该只订阅一次按键事件。因此,您应该验证您是否已订阅:

<html>
<script>
let subscribeEvent; 
function game() {
 if(subscribeEvent) {
   document.addEventListener("keypress", function(event) {
     if (event.keyCode == 50){
     alert('you took your turn')

     } else if (event.keyCode == 49) {
        alert('Proceeding to next turn.');
     }
  });
 }
}

</script>
<button onclick="game()">game</button>
</html>

让我们签署;
函数游戏(){
如果(订阅){
文档.添加的事件列表器(“按键”,功能(事件){
如果(event.keyCode==50){
警惕(“轮到你了”)
}else if(event.keyCode==49){
警报(“继续下一个转弯”);
}
});
}
}
游戏

如果从else If语句中删除
game()
函数,那么它应该可以工作。递归正在发生,因为每次单击按钮时,都会有一个新的事件侦听器配对/连接到game()


注意:EventListeners侦听事件,直到事件被删除。

每次按“49”键时,您都会重新运行
game()
,它会附加一个新的事件侦听器。为什么
game
会调用自身?每次执行函数时都会添加一个新的事件侦听器,即每次单击按钮时,以及每次从事件侦听器本身输入
1
。只需添加一次事件侦听器。