爲什麼在點擊開始按鈕時多次增加計數率？

Question

在下面的jQuery代碼中，計數器以啓動按鈕啓動，並停止使用停止按鈕。代碼按預期工作，但如果多次單擊開始按鈕，則增量率會增加，但我更感興趣知道爲什麼會發生這種情況，而不是修復程序，但這也很好。

<style> 
    #count{ 
     box-sizing:border-box; 
     height: 100px; 
     width: 100px; 
     padding: 30px; 
     margin-bottom: 30px; 
     background-color: red; 
     font-size: 40px; 
     color: white; } 
</style> 

HTML

<div id="count"></div> 
<button id="stop">Stop Counter</button> 
<button id="start">Start Counter</button> 

jQuery的

<script> 
     var eID; 
     var $t = $('#count'); 
     $t.text('0'); 

    $('#start').click(function() { 
     eID = window.setInterval(function(){ 
      curr = $t.text(); 
      new_count = parseInt(curr) + 1; 
      $t.text(new_count + ''); 
     },1000); 
     console.log(eID); 
    }); 

    $('#stop').click(function(){ 
     window.clearTimeout(eID) 
    }); 

</script> 

感謝
BT

Answer 1

試試這個，由啓發：

<script> 
    var eID; 
    var $t = $('#count'); 
    $t.text('0'); 

$('#start').click(function(event) { 
    event.stopPropagation(); 
    eID = window.setInterval(function(){ 
     curr = $t.text(); 
     new_count = parseInt(curr) + 1; 
     $t.text(new_count + ''); 
    },1000); 
    console.log(eID); 
}); 

$('#stop').click(function(){ 
    window.clearTimeout(eID) 
}); 

你超時triggerred兩次，所以你必須停止事件傳播。

後，你可以設置你的計數器格的文本爲0

注意clearTimeout ANS clearInterval是不一樣的，看this。

編輯：

var eID; 
var $t = $('#count'); 
$t.text('0'); 
var duration=1000; 
$('#start').on('click',function(event) { 
    event.stopPropagation(); 
    $t.text(0); 
    eID = window.setInterval(function(){ 
     curr = $t.text(); 
     new_count = parseInt(curr) + 1; 
     $t.text(new_count + ''); 
    },duration); 
    $(this).addClass('active'); 
}); 

$('#stop').click(function(){ 
    $t.text(0); 
    window.clearInterval(eID); 
    $('#start').removeClass('active'); 
}); 

https://jsfiddle.net/1t5vv9jk/

希望這有助於...

Answer 2

這裏每個start點擊setInterval新實例綁定，他們與#count div simultaneosly運行。使用此fiddle

JS：

var eID; 
     var $t = $('#count'); 
     $t.text('0'); 
    var duration=1000; 
    $('#start').on('click',function() { 
    if(!$(this).hasClass('active')) 
    { 
     eID = window.setInterval(function(){ 
      curr = $t.text(); 
      new_count = parseInt(curr) + 1; 
      $t.text(new_count + ''); 
     },duration); 
     $(this).addClass('active'); 
     } 
    }); 

    $('#stop').click(function(){ 

     window.clearTimeout(eID); 
     $('#start').removeClass('active'); 
    }); 

在一個替代你也可以使用：

var eID; 
    var $t = $('#count'); 
    $t.text('0'); 
    var duration=1000; 
$('#start').on('click',function() { 
    clearInterval(eID); 
    eID = window.setInterval(function(){ 
     curr = $t.text(); 
     new_count = parseInt(curr) + 1; 
     $t.text(new_count + ''); 
    },duration); 
}); 

$('#stop').click(function(){ 
    window.clearTimeout(eID); 
});