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

我正在切换布尔变量“userTurn”。有两个函数集“userTurn”的价值：切换布尔变量在单击事件条件语句中评估

runGame（），在本轮的最后一个声音播放完毕后这台“userTurn”为真。
buttonClick（），只应在“userTurn”为true时执行。 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之后，条件语句内的代码仍在执行。目标是“.quarter”仅在“userTurn”为true时才可点击。为什么buttonClick（）函数在“.quarter”被点击时仍然执行，即使当“userTurn”为false？

以下是设置 “userTurn” 的值的两个功能：）

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的链接。要开始游戏，请点击“开启”，然后点击“开始”。时间很慢，所以您必须等待模式播放，然后按照与播放顺序相同的顺序单击按钮。问题出现在第一个声音播放后。从那时起，只要用户点击，就会播放声音并点亮按钮，即使游戏正在播放该模式并且“userTurn”为false。另外值得警告的是，这仍然是一项正在进行中的工作，还有一些我正在研究的其他错误，例如用户所做的第一次转动不会点亮或播放声音，但选择会被推入正确的阵列和游戏将根据您的选择正确进行。我知道这是很多信息，但我坚持这一点，所以任何反馈将非常感激。谢谢！

来源

2017-06-18 Drazah

您使用buttonClick来处理点击按钮，但里面buttonClick你设置mouseup和mousedown每个按钮事件侦听器为好。由于各个按钮都有自己的mouseup和mousedown听众，因此无论是否再次调用buttonClick，都会发生这些事件。

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

来源

2017-06-18 17:38:51 DonovanM

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

回答

相关问题