Sou um pouco novo no js e tenho tentado descobrir como impedir que essa função seja executada quando clico em um botão. Eu tentei usar clearInterval, mas não tenho certeza se estou fazendo isso corretamente. Alguém pode dar uma olhada neste código e me apontar na direção certa?

Código:

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

Roteiro:

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/

Agradeço antecipadamente por sua ajuda.