javascript - X 秒后禁用 3 个 onClick 函数

Question

我仍在学习 Javascript 和 jQuery 的奇迹，我决定制作一款石头剪刀布游戏。然而，我想让这件事变得有趣并且更具互动性，而不仅仅是说“你赢了”或“你输了”。

我有 3 张图片:石头、剪刀、布。当您单击其中一个时，它会将图像源更改为另一个图像源，使其看起来像是被选中了。

问题是，当您单击一个时，游戏会在 2 秒内告诉您是赢了、输了还是平局。在那一刻，您仍然可以单击其他图像，而无需等待。我想禁用点击监听器，这样您就无法执行此操作，直到 2 秒结束。

JS代码:

$('#rock').click(function() {
    $(this).attr('src','Images/Result/Red Rock.png');
    $('#rock, #paper, #scissors').prop('disabled', true).delay(2000).prop('disabled', false);
});
$('#paper').click(function() {
    $(this).attr('src','Images/Result/Red Paper.png');
    $('#rock, #paper, #scissors').prop('disabled', true).delay(2000).prop('disabled', false);
});
$('#scissors').click(function() {
    $(this).attr('src','Images/Result/Red Scissors.png');
    $('#rock, #paper, #scissors').prop('disabled', true).delay(2000).prop('disabled', false);
});

实时站点:

http://goo.gl/3LTmMT

Answer 1

使用delay()仅适用于那些使用基于队列的执行的方法，例如动画相关方法(animate()/slideDown 等)。

在这种情况下最好使用超时

$('#rock').click(function () {
    $(this).attr('src', 'Images/Result/Red Rock.png');
    pauseClick();
});
$('#paper').click(function () {
    $(this).attr('src', 'Images/Result/Red Paper.png');
    pauseClick();
});
$('#scissors').click(function () {
    $(this).attr('src', 'Images/Result/Red Scissors.png');
    pauseClick();
});

function pauseClick() {
    var $els = $('#rock, #paper, #scissors').prop('disabled', true);
    setTimeout(function () {
        $els.prop('disabled', false);
    }, 3000)
}