在X秒後關閉3個onClick函數

Question

我還在學習Javascript和jQuery的奇妙之處，於是我決定製作一個rock paper scissors遊戲。不過，我想讓這個遊戲更有趣，更具互動性，而不僅僅是說「你贏了」或「你輸了」。

我有3圖像：岩石，紙和剪刀。當你點擊它們時，它會將圖像源更改爲另一個，使其看起來像被選中。

問題是，當你點擊一個遊戲時，遊戲會告訴你是否贏了，輸了或者是一個領帶。在那一刻，你仍然可以不用等待就點擊其他圖像。我想禁用點擊監聽器，這樣你就不能這樣做，直到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()將只對那些使用像動畫相關的方法）隊列基於執行（動畫（/了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) 
}