How do I clearInterval properly

Question

I have a function called: getNum() that returns a number added to itself plus 0.01 and displays it.

Then there is update() which checks if the number has crashed, and if not, it tests it, and if it doesn't crash, it sets the loop interval to be faster than it was before by a factor of 8ms.

So the result is that the number gets bigger faster and faster.

My question is: Why, when the number crashes, does it properly alert "crashed", but it doesn't clearInterval and the number keeps going?

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

This question has popped up before: https://stackoverflow.com/questions/14666924/clearinterval-not-working — ipsa scientia potestas, Oct 14 '18 at 20:17
https://stackoverflow.com/questions/14666924/clearinterval-not-working This question has appeared a couple of times before ^ — ipsa scientia potestas, Oct 14 '18 at 20:18
Possible duplicate of [clearInterval() not working](https://stackoverflow.com/questions/14666924/clearinterval-not-working) — Dexygen, Oct 14 '18 at 20:21
Please use proper grammar and sentence structure in your questions and omit extra unneeded words. Proper English syntax is as important as proper code syntax. I've edited your question accordingly. Please see https://stackoverflow.com/help/how-to-ask — lacostenycoder, Oct 14 '18 at 21:22

score 0 · Accepted Answer · answered Oct 14 '18 at 21:10

You are running setInterval function at incorrect place. The update function is called every 100 ms, so you are setting new interval for getNum function every 100 ms. Thus, in first 2000 ms you are setting 20 parallel intervals for this function and it actually runs every 100 ms (not 2000).

in this code if you add clearInterval before run setInterval then your function will not run until loop is greater than 100.

If you really want to set starting interval to 2000 ms and reduce it on every update you must use setTimeout instead of setInterval and reset it in getNum function. in this case at first time getNum will run exactly in 2000 ms, second time in 2000-20*8=1840ms, third time 1840-18*8=1696 ms, fourth time 1696-17*8=1560, fifth time 1560-15*8=1440 and so on.

if you fon't like to wait for the first number during 2000 ms, you can modify the first occurrence of

var interval  = setTimeout(getNum,loop)

,to this

var interval  = setTimeout(getNum(),loop)

so first run ofgetNum will be immediately

you can try the code snippet below to see the result

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

How do I clearInterval properly

1 Answers1