カウンタインクリメント指数関数

Question

私は毎回自分のカウンタをインクリメントしようとしていますが、htmlをクリックすると+1、+2、+3、+4のように指数関数的に増加します。

$('.dates').click(function(){ 
     $('#output').html(function(i, val) { return val*1+1 }); 
}); 

HTML：

<div id="output">0</div> 

ハートアニメーションコード：

var rand = Math.floor(Math.random() * 100 + 1); 
    var flows = ["flowOne", "flowTwo", "flowThree"]; 
    var colors = ["colOne", "colTwo", "colThree", "colFour", "colFive", "colSix"]; 
    var timing = (Math.random() * (1.3 - 0.3) + 1.6).toFixed(1); 
    // Animate Particle 
    $('<div class="particle part-' + rand + ' ' + colors[Math.floor(Math.random() * 6)] + '" style="font-size:' + Math.floor(Math.random() * (30 - 22) + 22) + 'px;"><i class="fa fa-heart-o"></i><i class="fa fa-heart"></i></div>').appendTo('.particle-box').css({ animation: "" + flows[Math.floor(Math.random() * 3)] + " " + timing + "s linear" }); 
    $('.part-' + rand).show(); 
    // Remove Particle 
    setTimeout(function() { 
     $('.part-' + rand).remove(); 
    }, timing * 1000 - 100); 

1. なぜそれが指数関数的に増加していますか？
2. どのように毎回1ずつインクリメントするのですか？ 0,1,2,3,4のように

Answer 1

文字列として考えているかもしれません。代わりに、文字列の連結を使用しての整数として値を解析するparseIntを使用します。

スニペットの作業

$('.dates').click(function() { 
    $('#output').html(function(i, val) { 
    return parseInt(val, 10) + 1; 
    }); 
}); 

：

$('.dates').click(function() { 
 
    $('#output').html(function(i, val) { 
 
    return parseInt(val, 10) + 1; 
 
    }); 
 
    return false; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#" class="dates">Click</a> 
 
<div id="output">0</div>

Answer 2

ほとんどの場合には、すべての新しいクリックイベントリスナを登録しますあなたがクリックする時間。

$('.dates').click(...)を囲むコードを確認してください。

コードでこの行が1回だけ呼び出されていることを確認してください。