Question

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

按钮每个都调用一个功能，用于设置＆＃39;运行＆＃39;另一个函数的变量为false，它自己运行＆＃39;变量为true。然后它调用一个递归函数（递归，因为它只是一遍又一遍地调用自身）。这些递归函数只在其运行时才会执行代码。变量是真的。

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

＆＃13;

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);
  }

}

＆＃13;

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;
}

＆＃13;

<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();" />

＆＃13;

Answer 1

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

例如，替换：

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

与

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

Here it is fixed in jsfiddle

Answer 2

你在错误的地方有分号
如果您需要运行单个动画，则需要使用单个全局变量来保存超时处理程序并在启动新处理程序时将其清除。

像这样：

＆＃13;

var running;

function startColours() {
  clearTimeout(running);
  running = setTimeout(Colours, 100, 0); //Run
}

function startDisco() {
  clearTimeout(running);
  running = setTimeout(Disco, 100);
}

function Disco() {
    var hex = "#";
    for (discoCount = 0; discoCount < 6; discoCount++) {
      hex = hex.concat((Math.floor(Math.random() * 17)).toString(16));
    }
    document.body.style.background = hex;
    running = setTimeout(Disco, 10);

}

function Colours(colourCount) {
    if (colourCount > 359) {
      colourCount -= 359;
    }
    document.body.style.background = "hsl(" + colourCount + ", 50%, 50%)";
    running = setTimeout(Colours, 10, colourCount + 1);
}

＆＃13;

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;
}

＆＃13;

<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();" />

＆＃13;

Answer 3

你对那些刚接触JavaScript的人犯了一个常见的错误 - 包括你后头的分号。这将创建一个没有正文的if语句，后面跟一个包含单个语句runningColours = false的块，该语句将无法正确执行。下面应该解决这个问题：

if (runningColours == true)
{
    runningColours = false;
}

以下JSFiddle链接应该具有脚本的工作版本： https://jsfiddle.net/4qhmtnhe/ 我希望它开始工作，你继续学习JavaScript。

Answer 4

真正的问题是if和Disco函数中Colours语句之后的分号：

if (runningDisco == true); {
  document.body.style.background = …
}

将以

执行

if (runningDisco == true)
  ;
{
  document.body.style.background = …
}

无论布尔变量如何都运行内容。为什么它有时会起作用？我猜当两个setTimeout回调彼此足够接近时，只有后者才会被渲染，感觉是一致的。当然那是very unstable - 他们确实在屏幕时间互相争斗。

当只有一个递归函数运行

4 个答案: