单击时setInterval重置

Question

我有这段代码：

 $(document).ready(function(){
        var count = 0;
        var clicks= 0;
        $(".press").click(function() {
            count++;
            clicks++;
            console.log(count);
            $('#animation2').html("My current count is: "+clicks);
            if(count==1){
                count=0;
                if($('.animation img').css('left') == '100px'){
                    $('.congrats').css('display','block');
                    $("#startClock").css('display','block');
                    $(".press").css('display','none');
                    $('.animation img').css('left','0');
                    var counter=0;
                    span.innerHTML = counter;
                }else{
                    $('.animation img').animate({ "left": "+=10px" }, 1 );
                }
            }
        });  
    span = document.getElementById("count");
        $("#startClock").click(function() {
            clicks=0;
            $("#animation2").css('display','block');
            $('#animation2').html("My current count is: "+clicks);
            var counter =30;
            $('.congrats').css('display','none');
            $('.press').css('display','block');
            $(this).css('display','none');
           setInterval(function() {
             counter--;
              if (counter >= 0) {
                 span.innerHTML = counter;
              }
              if (counter === 0) {
                 $("#startClock").css('display','block');
                 $('.press').css('display','none');
                 clearInterval(counter);
               }
             }, 1000);
        });
    });

当我第二次点击带有id = startClock的按钮时，此代码有一个必须重置的反击。如果我点击两次setInterval突然减少2秒。