Ich bin ein bisschen neu bei js und habe versucht herauszufinden, wie ich diese Funktion stoppen kann, wenn ich auf eine Schaltfläche klicke. Ich habe versucht, clearInterval zu verwenden, bin mir aber nicht sicher, ob ich es richtig mache. Kann sich jemand diesen Code ansehen und mich in die richtige Richtung lenken?

Code:

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

Skript:

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/

Vielen Dank im Voraus für Ihre Hilfe.