jquery - 使用jquery显示10秒内的点击次数

Question

我正在尝试开发这个游戏，需要用户快速单击一个按钮，我的秒数设置为 10，计时器仅在您单击按钮时启动，有一个“显示我”按钮，仅显示结果，并且10 秒后应该会弹出总数。

我的问题是我似乎无法获得正确的增量，并且在计时器完成后点击仍然会注册，这是不应该做的。我需要帮助。

$(document).ready(function() {
    $('#total').hide();
    var sec = 10;
    $('.setthis').click(function() {
        var timer = setInterval(function() {
            sec = sec - 1;
            if (sec > 0) {
                $('#target').click(function() {
                    $('#total').html(function(i, val) {
                        return val * 1 + 1
                    });
                })
            }
            if (sec == 0) {
                $('#total').show();
                clearInterval(timer);
            }
        }, 1000);
    })
    $('#showme').click(function() {
        $('#total').show();
    })
});

Answer 1

每次单击按钮时，您都设置了不正确的间隔。您应该设置一次间隔(第一次单击时)，然后用它来标记 10 秒的结束。

尝试以下操作:

$('#total').hide();
var clicks = 0;
var timerSet = false;
var timerDone = false;
$('#setthis').click(function () {
    if (!timerSet) {
        timerSet = true;
        setInterval(function () {
            timerDone = true;
        }, 10000);
    }
    if (!timerDone) {
        clicks++;
        $('#total').text(clicks);
    }

});
$('#showme').click(function () {
    $('#total').show();
});

查看工作fiddle