javascript - 计数器加速

Question

我不明白为什么每次单击“开始”时此脚本都会导致计数器加速。我需要插入什么来防止这种情况发生？

var count = 1;
var counting = function () {
    timer = setInterval(function () {
        $('#numbers').html(count);
        count++;
    }, 1000);
    function counting() {};
}
$("#start").click(counting);
$('#stop').click(function () {
    clearTimeout(timer);
});
$('#reset').click(function () {
    count = 0;
    $('#numbers').html(count);
});

Answer 1

您需要与 匹配setInterval，clearInterval而不是clearTimeout。

counting如果计时器已经启动，您还需要防止额外的调用，例如通过在$('#start').prop('disabled', true)内部调用counting。

或者，只需确保您在致电clearInterval(timer)之前立即致电timer = setInterval(...)

Answer 2

这是因为每次单击“开始”时，它都会调用创建间隔的函数。再次调用 setInterval 函数不会停止前一个间隔。

一个快速的解决方案是打电话clearInterval( timer )之前setInterval(...)，像这样：

var timer;
var counting = function() {
    clearInterval( timer );
    timer = setInterval( function() {
        $('#numbers').html( count );
        count++;
    }, 1000 );
}

请注意，我timer事先声明过，因为第一次单击“开始”会产生类似timer is undefined.