javascript - カウントダウン タイマーの停止 Javascript onClick

Question

次のコードを考えると：

    $('#myButton02').click(function(){
        $('#myButton02').hide();
        $('#counter').animate({width: 'toggle'});
        var count=65;
        var counter=setInterval(timer, 1000);
        function timer(){
          count=count-1;
          if (count <= 0){
            clearInterval(counter);
            return;  }
         document.getElementById("secs").innerHTML=count + " segs.";}
    });

    $('#myButton03').click(function(){
        recognition.stop();
        $('#myButton02').show();
        $('#counter').toggle();
    });

次のワークフローを使用できます。

• ユーザーがボタンをクリックすると、そのボタンは別のボタンに置​​き換えられます。
• div が表示され、65 秒のカウントダウン タイマーが表示されます。

ユーザーが他のボタン (最初のボタンを置き換えたボタン) をクリックすると、最初のボタンが再び表示され、2 番目のボタンが非表示になり、表示された div (#counter) が消えます。問題は、ユーザーが最初のボタンをもう一度クリックすると、カウントダウン タイマーが異常になり、新しいカウントダウンを開始する代わりに乱数の切り替えを開始することです (ユーザーが最初のカウントダウンが停止する前にもう一度クリックした場合のみ)。

「#myButton03」がクリックされたときにタイマーがカウントダウンを停止して、 「#myButton02 」をクリックするたびに「再起動」するようにするにはどうすればよいですか?