Question

我还在学习Javascript和jQuery的奇迹，我决定制作一个石头剪刀游戏。但是我想让这个更有趣，更具互动性而不只是说＆＃34;你赢了＆＃34;或者＆＃34;你输了＃34;。

我有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)
}

X秒后禁用3个onClick函数

1 个答案: