jquery - setTimeout 関数の停止

Question

わかりましたので、 jsfiddleにある非常に単純な画像スライド ショーをここに示します

ご覧のとおり、開始をクリックすると正常に動作します。ただし、[停止] をクリックすると、関数は続行されます。ここでは jquery を使用します。

$(document).ready(function() {
    var timer;
    $('img.hidden').hide();
    $('img.top').show();

    $('input').click(function(){
            var value = $('input').attr("value");

    if(value == "start"){

    $(this).attr("value","stop");
    startShow();

    }else if(value == "stop"){
            $(this).attr("value","start");
            alert('stopped');
            clearTimeout(timer);

        }   
    });

 });

 function startShow(){
   var $top = $('img.top').attr("src");
   var $last = $('img').last().attr("src");

   if($top != $last ){

    var $topImg = $('img.top');
    var $nextImg = $('img.top').next();

    $topImg.hide();
    $nextImg.show();

    $topImg.removeClass("top");
    $nextImg.addClass("top");
   }
   else{

    var $topImg = $('img.top');
    var $nextImg = $('img').first();

    $topImg.hide();
    $nextImg.show();

    $topImg.removeClass("top");
    $nextImg.addClass("top");

   }
   timer = setTimeout(function() { startShow(); }, 2000);
};