Javascript 如何正确地清除间隔_Javascript_Html

Javascript 如何正确地清除间隔

javascript html

Javascript 如何正确地清除间隔,javascript,html,Javascript,Html,我有一个名为：getNum（）的函数，它返回一个添加到自身的数字加上0.01，并显示它然后是update（），它检查数字是否崩溃，如果没有崩溃，它将对其进行测试，如果没有崩溃，它将循环间隔设置为比以前快一倍8ms 结果是这个数字越来越大，越来越快我的问题是：为什么当数字崩溃时，它会正确地提醒“崩溃”，但它不会清除间隔，并且数字会继续运行 <html> <body> <p id="output"></p> </body> <

我有一个名为：getNum（）的函数，它返回一个添加到自身的数字加上0.01，并显示它

然后是update（），它检查数字是否崩溃，如果没有崩溃，它将对其进行测试，如果没有崩溃，它将循环间隔设置为比以前快一倍8ms

结果是这个数字越来越大，越来越快

我的问题是：为什么当数字崩溃时，它会正确地提醒“崩溃”，但它不会清除间隔，并且数字会继续运行

<html>
<body>
  <p id="output"></p>
</body>
</html>

<script type="text/javascript">
var x    = 0,
    loop = 2000;
var interval  = setInterval(getNum,loop),
    interval1 = setInterval(update,100),
    crashChance = 150,
    crash       = 0;
  function getNum() {
    x = x + 0.01;
    x = Math.floor(x * 100) + 1;
    x = x / 100;
    document.getElementById('output').innerHTML = x;
  }

  function update() {
    testCrash();
    if(testCrash() == 1) {
      alert("crashed");
      clearInterval(interval);
      clearInterval(interval1);
      crashChanse = 0;
      crash       = 0;
    }

    else {
      loop = loop - 8;
      interval = setInterval(getNum,loop);
    }
  }

  function testCrash() {
    crash = Math.floor(Math.random() * 150 + 1);
    if(crash == crashChance) {
      return 1;
    }

    else {
      return 0;
    }
  }
</script>



var x=0，
loop=2000；
var interval=setInterval（getNum，循环），
interval1=设置间隔（更新，100），
crashChance=150，
崩溃=0；
函数getNum（）{
x=x+0.01；
x=数学楼层（x*100）+1；
x=x/100；
document.getElementById（'output'）。innerHTML=x；
}
函数更新（）{
testCrash（）；
如果（testCrash（）==1）{
警报（“崩溃”）；
间隔时间；
间隔时间（间隔1）；
crashChanse=0；
崩溃=0；
}
否则{
循环=循环-8；
间隔=设置间隔（getNum，循环）；
}
}
函数testCrash（）{
crash=Math.floor（Math.random（）*150+1）；
如果（崩溃==崩溃）{
返回1；
}
否则{
返回0；
}
}



var x=0，
loop=2000；
var interval=setInterval（getNum，循环），
interval1=设置间隔（更新，100），
crashChance=150，
崩溃=0；
函数getNum（）{
x=x+0.01；
x=数学楼层（x*100）+1；
x=x/100；
document.getElementById（'output'）。innerHTML=x；
}
函数更新（）{
testCrash（）；
如果（testCrash（）==1）{
警报（“崩溃”）；
间隔时间；
间隔时间（间隔1）；
crashChanse=0；
崩溃=0；
}
否则{
循环=循环-8；
间隔=设置间隔（getNum，循环）；
}
}
函数testCrash（）{
crash=Math.floor（Math.random（）*150+1）；
如果（崩溃==崩溃）{
返回1；
}
否则{
返回0；
}
}

您正在创建一个新的间隔，而没有清除上一个间隔。这就是为什么在背景中有一个装满了间隔的口袋，所以如果你重新选择了一个，所有其他人都会继续做他们的事情。在变量间隔中存储新间隔之前，应删除旧间隔

clearInterval(interval);
interval = setInterval(getNum,loop)

编辑：

这将每100ms清除第一次间隔，尽管它从未执行过。要解决这个问题，您可以在第二个间隔内检查崩溃，但将结果（true或false）存储到一个变量中。然后，您可以检查该变量是否在第一个间隔内设置为true。有点复杂？一点也不

var result = false;
function update() {
  //Check for crash...
  if (crash) {
    result = true;
  }
}

function getNum() {
  //Getting num
  if (result) {
    clearInterval(interval);
  }
}

希望有帮助！

Darth Moon

您在错误的位置运行setInterval函数。update函数每100毫秒调用一次，因此每100毫秒为getNum函数设置一次新的间隔。因此，在最初的2000毫秒中，您为该函数设置了20个并行间隔，它实际上每100毫秒运行一次（不是2000）

在这段代码中，如果在运行setInterval之前添加clearInterval，那么直到循环大于100，函数才会运行

如果您真的想将启动间隔设置为2000毫秒，并在每次更新时减少它，则必须使用setTimeout而不是setInterval，并在getNum函数中重置它。在这种情况下，第一次getNum将在2000毫秒内运行，第二次在2000-20*8=1840毫秒内运行，第三次1840-18*8=1696毫秒，第四次1696-17*8=1560，第五次1560-15*8=1440，依此类推

如果您不想在2000毫秒内等待第一个号码，您可以修改

var interval  = setTimeout(getNum,loop)

对此,

var interval  = setTimeout(getNum(),loop)

所以Getnum的第一次运行将立即

您可以尝试下面的代码片段以查看结果



var x=0，
loop=2000；
var=false；
var interval=setTimeout（getNum（），循环），
interval1=设置间隔（更新，100），
crashChance=150，
崩溃=0；
函数getNum（）{
如果（崩溃）
返回
其他的
间隔=设置超时（getNum，循环）
x=x+0.01；
x=数学楼层（x*100）+1；
x=x/100；
document.getElementById（'output'）。innerHTML=x；
}
函数更新（）{
testCrash（）；
如果（testCrash（）==1）{
崩溃=真；
警报（“崩溃”）；
间隔时间；
间隔时间（间隔1）；
crashChanse=0；
崩溃=0；
}
否则{
循环=循环-8；
}
}
函数testCrash（）{
crash=Math.floor（Math.random（）*150+1）；
如果（崩溃==崩溃）{
返回1；
}
否则{
返回0；
}
}

这个问题以前出现过：这个问题在^可能的重复之前出现过几次。请在你的问题中使用正确的语法和句子结构，并省略多余的单词。正确的英语语法和正确的代码语法一样重要。我已经相应地编辑了你的问题。请看，我试过了，但现在在粘贴到确切的位置后，我现在没有得到任何输出。不知道为什么？是的，该死。您的第一个inteval需要2000ms，但第二个inteval每100ms删除一次

var interval  = setTimeout(getNum(),loop)