为什么多次单击开始按钮时计数器速率会增加？答案

【问题标题】：Why counter rate increases when clicked on start button multiple times?为什么多次单击开始按钮时计数器速率会增加？
【发布时间】：2016-11-24 16:04:51
【问题描述】：

在下面的 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

【问题讨论】：

原因是每次点击都会启动另一个间隔实例。
还要注意clearTimeout()不是setInterval()的反面——clearInterval()是。

标签： jquery

【解决方案1】：

在每个start 上单击一个新的setInterval 实例被绑定并且它们与#count div 同时运行。使用这个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);
});

【讨论】：

它不工作吗？根据您的问题，您要求修复对多次点击的增加间隔效应
@vispan 代码有效，但你能首先解释一下为什么多次点击率会增加吗？
setInterval 一次又一次地与window 绑定，多个interval 事件开始以相同的Div 运行

【解决方案2】：

试试这个，灵感来自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)
});

您的超时被触发两次，因此您必须停止事件传播。

之后，您可以将计数器 div 的文本设置为 0。

请注意，clearTimeout 和 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/

希望对您有所帮助...

【讨论】：

-1的原因？