How to stop the timer?

Question

I am a little new to js and trying to figure out how to stop this function from starting when I click the button. I tried using clearInterval, but I'm not sure if I am doing this correctly. Can someone take a look at this code and point me in the right direction?

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

Answer 1

You must give JavaScript a link to the interval:

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

Then you can clean it like this:

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