停止倒數計時器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秒。

如果用戶點擊另一個按鈕（一個替換了第一個按鈕），則第一個按鈕再次出現，隱藏第二個按鈕，然后出現的div（#counter）消失。 問題是 ，當用戶再次點擊第一個按鈕時，倒數計時器會瘋狂並開始切換隨機數而不是開始新的倒計時（僅當用戶在第一次倒計時停止之前再次點擊它時）。

點擊“＃myButton03”時，如何讓計時器停止倒計時，每次點擊“＃myButton02”時它都會“重新啟動”而不會瘋狂？

Answer 1

我同意。 使計數器變量為全局變量，並在單擊myButton03時重置它。 請參閱此代碼的修改版本以獲取可能的方法：

var count;
var counter;

function resetEverything()
{
    $("#counter, #myButton03").hide();
    $('#myButton02').show();
    clearInterval(counter);  
}

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

    $('#myButton03').click(function(){
        resetEverything();
    });
});

http://jsfiddle.net/Xd3UR/

希望有所幫助。

Answer 2

使counter變量全局，然后myButton03下行添加到myButton03單擊函數應該可以解決問題。

clearInterval(counter);