How to stop a timer function from running?

Question

I'm a bit new to js and have been trying to figure out how to stop this function from running when I click on a button. I tried using clearInterval but I am not sure I am doing it properly. Can someone take a look at this code and point me in the right direction?

Code:

<div><h1 id="target"></h1></div>
<button id="stop">Stop</button>​

Script:

var arr = [ "one", "two", "three"];
(function timer(counter) {
 var text = arr[counter];
 $('#target').fadeOut(500, function(){ 
 $("#target").empty().append(text).fadeIn(500);
 });
 delete arr[counter];
 arr.push(text);
 setTimeout(function() {
 timer(counter + 1);
 }, 3000);
 $("#stop").click(function () {
 clearInterval(timer);
 });
})(0);
setInterval(timer);

JS Fiddle: http://jsfiddle.net/58Jv5/13/

Thanks in advance for your help.

• VisioN: The last line setInterval(timer); makes no sense and gives an error, since timer variable is undefined.
• Dexter Huinda: the setInterval sets the whole engine running, without it, the code will STOP. It seems most of you here do NOT understand the difference between setInterval and setTimeout. Read your docs again.

Answer 1

You need to give JavaScript a reference to the interval:

var t = setTimeout(function() {
 timer(counter + 1);
}, 3000);

Then you can clear it like so:

$("#stop").click(function () {
 clearTimeout(t);
});

• Dexter Huinda: you were referencing the wrong object to kill, should be setInterval, not setTimeout
• Dexter Huinda: Why are people voting for an erroneous answer like this?
• Anthony Grist: @DexterHuinda It should be clearTimeout(t), not clearInterval(t) - the interval code is incorrect and irrelevant.
• Dexter Huinda: Did you read up to the rest of his code where it says : setInterval(timer); ? This code sets the pace and gets the whole thing running, in an interval defined by timer. Stopping setInterval will stop the loop, not the setTimeout. See the difference?
• Anthony Grist: @DexterHuinda It does no such thing. timer is a recursive function, that sets a timeout which calls itself (with an increased counter) when the timeout ends. It's also automatically called with a starting value of 0. The setInterval(timer) is unnecessary and incorrect, and will throw an error (see VisioN's comment on the question). Don't believe me? Have a jsFiddle