在点击事件的条件语句中评估的切换布尔变量

Question

我正在切换布尔变量“userTurn”。有两个函数可以设置“userTurn”的值：

1. runGame()，在播放当前回合的最后一个声音后将“userTurn”设置为真。

2. buttonClick()，仅当“userTurn”为真时才执行。 buttonClick 在用户成功复制当前模式或用户出错时将“userTurn”设置为 false。

   我正在评估点击事件内的条件语句中“userTurn”的值。

   $(".quarter").on('click', function(){
       if( userTurn===true && isOn===true){
           var color = $(this).attr('id');
           clearTimeout(buzz);
           buttonClick(color);
       } 
   })
   

   用户成功复制当前模式后，或者如果用户出错，“userTurn”设置为false。我遇到的问题是，在“userTurn”设置为 false 后，条件语句中的代码仍在执行。目标是只有在“userTurn”为真时才能点击“.quarter”。为什么即使“userTurn”为false，点击“.quarter”时buttonClick()函数仍然执行？？

以下是设置“userTurn”值的两个函数：

1. runGame():

   function runGame(){
       if(isOn===true){
           userTurn = false;
           count();
           playPattern(order, index);
           if(index===counter-1&&userTurn===false){
               userTurn=true;
               clearInterval(play);
               buzz = setTimeout(buzzer, 10000);
           }else{
               index++;
           } 
       } else {
           clearInterval(play);
           clearTimeout(buzz);
       }
   }
   

   2.buttonClick()：

   function buttonClick(color){
       var yellowSound = document.getElementById("horseSound");
       var redSound = document.getElementById("endFx");
       var greenSound = document.getElementById("westernRicochet");
       var blueSound = document.getElementById("robotBlip");
       $("#red").mousedown(function(){
           $("#red").css("background-color", "#ff4d4d");
           redSound.play();
       });
       $("#red").mouseup(function(){
           $("#red").css("background-color", "#ff0000");
           redSound.pause();
       });
       $("#blue").mousedown(function(){
           $("#blue").css("background-color", "#0000e6");
           blueSound.play();
       });
       $("#blue").mouseup(function(){
           $("#blue").css("background-color", "#000099");
           blueSound.pause();
       });
       $("#green").mousedown(function(){
           $("#green").css("background-color", "#00e600");
           greenSound.play();
       });
       $("#green").mouseup(function(){
           $("#green").css("background-color", "#009900");
           greenSound.pause();
       });
       $("#yellow").mousedown(function(){
           $("#yellow").css("background-color", "#ffff4d");
           yellowSound.play();
       });
       $("#yellow").mouseup(function(){
           $("#yellow").css("background-color", "#ffff00");
           yellowSound.pause();
       });
       if(color===order[compareIndex]){
           userPattern.push(color);
           console.log(userPattern, "match");
           buzz = setTimeout(buzzer, 10000);
           compareIndex++;
           if(userPattern.length===counter){
               userTurn=false;
               compareIndex=0;
               index=0;
               counter++;
               count();
               userPattern.length=0;
               play = setInterval(runGame, 2000);
               clearTimeout(buzz);
           }
       } else {
           userTurn=false;
           console.log('don\'t match');
           clearTimeout(buzz);
           index=0;
           compareIndex = 0;
           userPattern.length=0;
           buzz = setTimeout(buzzer, 1);
       }
   }
   

在去 CODEPEN 之前请调低音量！！ 这是codepen 的链接。 要开始游戏，请单击“On Off”，然后单击“start”。时间很慢，因此您必须等待模式播放，然后按照播放顺序单击按钮。播放第一个声音后会出现问题。从那时起，用户进行的任何点击都会播放声音并点亮按钮，即使游戏正在播放该模式并且“userTurn”为假时也是如此。另请注意，这仍在进行中，还有一些其他错误我正在处理，例如用户做出的第一轮不会亮起或播放声音，但选择被推入正确的阵列，游戏将根据您的选择正常进行。我知道这是很多信息，但我坚持这一点，所以任何反馈将不胜感激。谢谢！

Answer 1

您使用buttonClick 来处理单击按钮，但在buttonClick 内部，您还为每个按钮设置了mouseup 和mousedown 事件侦听器。由于各个按钮都有自己的mouseup 和mousedown 侦听器，因此无论是否再次调用buttonClick，事件都会发生。

您还必须检查每个事件处理程序中的userTurn 是否为true，以防止它们触发。此外，最好将这些设置在 buttonClick 之外，这样您就不会在每次调用 buttonClick 时都添加新的侦听器。