How does clearInterval() works?

Question

I the given code, I am using setInterval() and clearInterval() methods. Here are two buttons for setInterval() and two for clearInterval(), if I click both setInterval() buttons, then the clearInterval() buttons doesn't work.

HTML:

<div id="a"></div>

<button id='bt1'>start</button>
<button id='bt2'>Stop</button>
<button id='bt3'>Start</button>
<button id='bt4'>Stop</button>

Javascript:

var Graph = {
graph: null,
start: function (i) {
    this.graph = setInterval(function () {
        $('#a').html(i++);
    }, 1000);
},
stop: function () {
    window.clearInterval(this.graph);
}
};
$('#bt1').click(function(){
   Graph.start(1);
});
$('#bt2').click(function(){
   Graph.stop();
});
$('#bt3').click(function(){
   Graph.start(1);
});
$('#bt4').click(function(){
   Graph.stop();
});

Fiddle: Fiddle

Answer 1

As the other answers, the first timer ID is overwritten. Try to store the IDs separately in an array or at least as separate variable names. Here is one adjustment using an array:

var Graph = {
graph: [0, 0],                               /// turn this into an array
start: function(id, i) {                     /// add a new parameter here
    this.graph[id] = setInterval(function () {
        $('#a').html(i++);
    }, 1000);
},
stop: function (id) {                        /// add parameter here as well
    window.clearInterval(this.graph[id]);
}
};
$('#bt1').click(function(){
   Graph.start(0, 1);                        /// set index 0 with this timer id
});
$('#bt2').click(function(){
   Graph.stop(0);                            /// stop using id at index 0
});
$('#bt3').click(function(){
   Graph.start(1, 1);                        /// etc.
});
$('#bt4').click(function(){
   Graph.stop(1);
});

Your i variable may be subject to the same thing depending on what you try; I haven't addressed that here.

Hope this helps.

Answer 2

You only have a single variable to store the result of both calls to setInterval, i.e. you are overwriting it on the second call so the first timer can't be cleared.

Answer 3

The clearInterval() method clears a timer set with the setInterval() method.

The ID value returned by setInterval() is used as the parameter for the clearInterval() method.

Note: To be able to use the clearInterval() method, you must use a global variable when creating the interval method:

myVar = setInterval("javascript function",milliseconds);

Then you will be able to stop the execution by calling the clearInterval() method.

You can also refer to this answer

Answer 4

If you click the #bt1 button and then the #bt3 button, the second start() function call will overwrite the graph variable in the Graph object. So the ID value returned by first setInterval() call is lost, you cannot clear the first timer.

Just put the following line of code before the setInterval() call in the start() method. This will stop the previous running timer:

if (this.graph) { this.stop(); }

Like this:

var Graph = {
graph: null,
start: function (i) {
    if (this.graph) { this.stop(); }
    this.graph = setInterval(function () {
        $('#a').html(i++);
    }, 1000);
},
stop: function () {
    window.clearInterval(this.graph);
}
};
$('#bt1').click(function(){
   Graph.start(1);
});
$('#bt2').click(function(){
   Graph.stop();
});
$('#bt3').click(function(){
   Graph.start(1);
});
$('#bt4').click(function(){
   Graph.stop();
});