How do I use clearInterval()?

Question

I'm trying to make an interactive car game/HTML web-based thing on repl.it. I'm trying to do the windshield wipers with a setInterval/clearInterval system but the clearInterval() function is not working for me. It wouldn't clear the interval.

var interval = '';

function startInterval() {
  interval = setInterval(function() {
    document.getElementById('demo').innerHTML = 'type code';
    setTimeout(function() {
      document.getElementById('demo').innerHTML = 'other code';
    }, 1000);
  }, 2000);
}

function stopInterval() {
  clearInterval(interval);
}

Does this answer your question? [What is the scope of variables in JavaScript?](https://stackoverflow.com/questions/500431/what-is-the-scope-of-variables-in-javascript) — Mike Doe, Apr 11 '20 at 19:02
The code works fine, but remember that you are using `setTimout`, so even if you call `stopInterval()`, the interval on hold, will fire ... you could do is, start the interval in `0` and upon `clearInterval()` set the interval to `0` again ... inside the setTimeout, only run the code if `interval > 0` ... does it makes sense? [like this](https://jsbin.com/museduv/1/edit?html,js,output) — balexandre, Apr 11 '20 at 20:54

score 0 · Accepted Answer · answered Apr 11 '20 at 21:12

first of all, Welcome to StackOverflow

Your code works fine, but remember that you are using setTimout, so even if you call stopInterval(), the code inside the timeout will fire once more

to prevent it, you could do this

start the interval with 0
when clearInterval() set the interval to 0 once again
now, inside the setTimeout function, only run the code if interval > 0

does it makes sense?

here's a simple example in JsBIN and well with StackOverflow Code:

var pre = document.querySelector("pre")
var interval = 0;

function startInterval() {
  pre.innerHTML += 'START called\n';
  interval = setInterval(function() {
    pre.innerHTML += 'type code\n';

    setTimeout(function() {
      if (interval > 0 ) {
        // only if the interval is not cleared
        pre.innerHTML += 'other code\n';
      }
    }, 1000);
    
  }, 2000);
}

function stopInterval() {
  pre.innerHTML += 'STOP called\n';
  clearInterval(interval);
  interval = 0;
}

document
  .querySelector("#btnStart")
  .addEventListener("click", startInterval);
document
  .querySelector("#btnStop")
  .addEventListener("click", stopInterval);

<button id="btnStart">START</button> <button id="btnStop">STOP</button>
<hr/>
<pre></pre>

score -1 · Answer 2 · answered Apr 11 '20 at 19:05

-1

You have to define interval variable outside of function:

let interval;
function startInterval() {
  interval = setInterval(function() {
    document.getElementById('demo').innerHTML = 'type code';
    setTimeout(function() {
      document.getElementById('demo').innerHTML = 'other code';
    }, 1000);
  }, 2000);
}

function stopInterval() {
  clearInterval(interval);
}
``

answered Apr 11 '20 at 19:05

BeHappy

3,705
5
18
59

That is what I did, otherwise I can't use it in a different function or if then else statement if I needed to. Sorry I didn't make sure you saw that. I will edit it. – BraylanBB121 Apr 11 '20 at 20:35

How do I use clearInterval()?

2 Answers2

Linked