Why counter rate increases when clicked on start button multiple times?

Question

In jQuery code below a counter is started with start button and stopped using a stop button. Code works as expected but if you click the start button multiple time, then the rate of increment increases, I am more interested in knowing why this happen rather than the fix but that's fine too.

<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>

Thanks
bt

The reason is because you start another interval instance on every click. — Rory McCrossan, Nov 24 '16 at 16:07
Also note that `clearTimeout()` is not the converse of `setInterval()` -- `clearInterval()` is. — Frédéric Hamidi, Nov 24 '16 at 16:09

score -1 · Answer 1 · edited May 23 '17 at 12:13

Try this, inspired by jQuery stop event propagation :

<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)
});

Your timeout is triggerred twice, so you must stop event propagation.

After, you can set text of your counter div to 0.

Note that clearTimeout ans clearInterval aren't the same, see this.

EDIT :

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/

Hope this help...

Reason of -1 please ? – Weenesta - Mathieu Dormeval Nov 24 '16 at 16:15 — Weenesta - Mathieu Dormeval, Nov 24 '16 at 16:15

RonyLoud · Answer 2 · 2016-11-24T16:42:25.323

Here on each start click a new instance of setInterval is binded and they run simultaneosly with the #count div. Use this 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');
    });

In an alternate you can also use:

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);
});

Is it not working? As per your question you asked to fixed the increasing interval effect on the multiple click — RonyLoud, Nov 24 '16 at 16:22
@vispan the code works but can you explain why the rate increases on multiple click, in the first place. — b Tech, Nov 24 '16 at 16:32
The `setInterval` is binded again and again with `window` and multiple `interval` events start running with the same `Div` — RonyLoud, Nov 24 '16 at 16:33

Why counter rate increases when clicked on start button multiple times?

2 Answers2