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

尝试此操作，灵感来自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/

希望这有帮助...

Answer 2

在每次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);
});

为什么在多次单击开始按钮时反转率增加？

2 个答案: