¿Cómo detener la ejecución de una función de temporizador?

Soy un poco nuevo en js y he estado tratando de averiguar cómo detener esta función para que no se ejecute cuando hago clic en un botón. Intenté usar clearInterval pero no estoy seguro de hacerlo correctamente. ¿Puede alguien echar un vistazo a este código y señalarme la dirección correcta?

Código:

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

Guión:

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/

Gracias de antemano por tu ayuda.