两个递归函数尝试在只有一个应该运行的同时执行

Question

基本上,我正在尝试创建一个有2个按钮的网页; 一个会导致屏幕随机闪烁,另一个会导致它慢慢改变颜色.我希望能够在这两者之间切换(如果按下第一个按钮,它开始闪烁,然后如果你按下第二个按钮,它会慢慢改变而不需要任何取消按钮).

每个按钮都调用一个函数,该函数将另一个函数的"running"变量设置为false,并将其自己的"running"变量设置为true.然后它调用一个递归函数(递归,因为它只是一遍又一遍地调用自身).这些递归函数仅在其"running"变量为true时才执行其代码.

如果您运行该代码段,您可以看到程序非常不一致(您可能需要稍微使用它来查看问题,因为它有时似乎有效).有时候它拒绝改变功能,有时两个功能似乎都是活动的,它们都试图执行(它们看起来好像在争取控制权).我不明白这是怎么回事,因为我相信,任何时候只有一个'运行'变量可以是真的.

var runningDisco = false;
var runningColours = false;


function startColours() {
  if (runningDisco == true); //Is disco running?
  {
    runningDisco = false; //If yes, stop it
  }
  runningColours = true; //Indicate we are running
  window.setTimeout(Colours, 100, 0); //Run
}

function startDisco() {
  if (runningColours == true); {
    runningColours = false;
  }
  runningDisco = true;
  window.setTimeout(Disco, 100);
}

function Disco() {
  if (runningDisco == true); {
    hex = "#";
    for (discoCount = 0; discoCount < 6; discoCount++) {
      hex = hex.concat((Math.floor(Math.random() * 17)).toString(16));
    }
    document.body.style.background = hex;
    window.setTimeout(Disco, 10);
  }

}

function Colours(colourCount) {
  if (runningColours == true); {
    if (colourCount > 359) {
      colourCount -= 359;
    }
    document.body.style.background = "hsl(" + colourCount + ", 50%, 50%)";
    window.setTimeout(Colours, 10, colourCount + 1);
  }

}

input {
  font-family: 'Roboto', sans-serif;
  text-align: center;
  background-color: #dd1021;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

<input id="clickMe" type="button" value="Start Disco" onclick="startDisco();" />
<input id="clickMe" type="button" value="Start Colours" onclick="startColours();" />

Answer 1

if语句后面的分号导致问题

例如,替换:

 if (runningColours == true); {
 if (runningDisco == true); {

同

 if (runningColours == true) {
 if (runningDisco == true) {

这里是jsfiddle修复的.