javascript - 当只有一个应该运行时，两个递归函数尝试同时执行

Question

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

每个按钮都调用一个函数，该函数将另一个函数的“running”变量设置为 false，并将其自己的“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) {

Here it is fixed in jsfiddle .