Question

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

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

结果是数字越来越大。

我的问题是：为什么当数字崩溃时，它是否可以正确地警告“崩溃” ，但是并没有清除Interval并且数字还在持续？

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

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

Answer 1

interval = setInterval(getNum,loop);

您要创建一个新的间隔而不清除上一个间隔。这就是为什么背景中充满间隔的原因，因此，如果您不满意，其他所有人将继续做他们的事情。在以可变间隔存储新间隔之前，应删除旧间隔。

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

编辑：

这将每100毫秒清除一次您的第一个间隔，尽管它从未执行过。要解决此问题，您可以在第二个间隔中检查崩溃，但将结果（对或错）存储到变量中。然后，您可以检查在第一个间隔中该变量是否设置为true。有点复杂吗？根本没有！

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

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

希望有帮助！达斯·月亮

Answer 2

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

在此代码中，如果您在运行setInterval之前添加clearInterval，则您的函数要在循环大于100时才能运行。

如果您确实希望将开始间隔设置为2000 ms并在每次更新时将其减小，则必须使用setTimeout而不是setInterval并在getNum函数中将其重置。在这种情况下，第一次getNum将在2000毫秒内准确运行，第二次在2000-20 * 8 = 1840ms，第三次1840-18 * 8 = 1696毫秒，第四次1696-17 * 8 = 1560，第五次1560- 15 * 8 = 1440等等。

如果您不想在2000毫秒内等待第一个数字，则可以修改第一个出现的

var interval  = setTimeout(getNum,loop)

，对此

var interval  = setTimeout(getNum(),loop)

所以第一次运行ofgetNum将立即

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

<html>
<body>
  <p id="output"></p>
</body>
</html>

<script type="text/javascript">
var x    = 0,
    loop = 2000;
var crashed=false;
var interval  = setTimeout(getNum(),loop),
    interval1 = setInterval(update,100),
    crashChance = 150,
    crash       = 0;
  function getNum() {
    if(crashed)
    	return
   else
    	interval  = setTimeout(getNum,loop)
   x = x + 0.01;
    x = Math.floor(x * 100) + 1;
    x = x / 100;
    document.getElementById('output').innerHTML = x;
   }

  function update() {
    testCrash();
    if(testCrash() == 1) {
    	crashed=true;
      alert("crashed");
      clearInterval(interval);
      clearInterval(interval1);
      crashChanse = 0;
      crash       = 0;
    }

    else {
      
      loop = loop - 8;
    }
  }

  function testCrash() {
    crash = Math.floor(Math.random() * 150 + 1);
    if(crash == crashChance) {
      return 1;
    }

    else {
      return 0;
    }
  }
</script>

我如何正确清除间隔

2 个答案: