超時之前，它可以再次點擊

Question

在我的拼寫遊戲中，用戶單擊拼寫單詞的字母。當一個字母被點擊時，它會將動畫插入到正確的區域。

問題是，當你點擊它們來加快動畫的混亂和字母重疊。

爲了解決這個問題，我想添加1或2秒的超時時間，然後再次點擊clickable。

我該怎麼做，我的代碼放在哪裏？

下面是clickables

$('.drag').on('click', function(e) { 
e.preventDefault(); 

var target = $('.drop-box.spellword:not(.occupied):first'); 
var targetPos = target.position(); 
var currentPos = $(this).offset(); 
var b = $(this); 

if (target.length) { 
    target.addClass("occupied"); 
    $(".minibutton").prop("disabled", true); 
    b.clone().addClass(
    b.data("letter") == target.data("letter") ? "wordglow3" : "wordglow").appendTo("table").css({ 
     background: "transparent", 
     position: "absolute", 
     top: currentPos.top, 
     left: currentPos.left 
    }).animate({ 
     top: targetPos.top, 
     left: targetPos.left 
    }, "slow", function() { 
     $(this).css({ 
      top: 0, 
      left: 0 
     }).appendTo(target); 
     if (!$('.drop-box.spellword:not(.occupied)').length) { 
      var wordIsCorrect = 0; 
      $('.drop-box.spellword').each(function() { 
       if ($(this).attr("data-letter") == $(this).find("div").attr("data-letter")) { 
        wordIsCorrect++; 
       } 
      }); 
      console.log(wordIsCorrect); 
      console.log($('.drop-box.spellword').length); 
      if ($('.drop-box.spellword').length == wordIsCorrect) { 

       $('.drop-box.spellword').addClass('wordglow2'); 
       $(right).val('Well Done!'); 
       $(right).show(); 
       audioS.play(); 
       $('.counter').html(completeWords + '/6').show(); 
       $(wrong).hide(); 
       $('.minibutton').prop('disabled', false); 

      } else { 

       $('.drop-box.spellword').addClass("wordglow4").css('color', 'transparent'); 
       $(wrong).val('Try Again'); 
       $('.minibutton').prop('disabled'); 
       $(wrong).show(); 
       audioF.play(); 
       $('.counter').html(completeWords + '/6').show(); 
       $(right).hide(); 
       //$('.minibutton').prop('disabled', true); 
       $('.drop-box.spellword').animate({ 
        'opacity': 1 
       }, 1000, function() { 
        $(this).removeClass('wordglow4').removeClass('occupied').html('') 
       }); 
      } 


     } 
    }); 

} 

感謝代碼！

Answer 1

var animation = false; 
$('.drag').on('click', function(e) { 
    if(animation) return; 
    animation = true; 

，並添加到您的回調：

animation = false; 

全部李婷：

var animation = false; 

$('.drag').on('click', function(e) { 
e.preventDefault(); 
if(animation) return; 
animation = true; 
setTimeout(function(){animation = false;},1000); // Can't click letters for 1 sec 

var target = $('.drop-box.spellword:not(.occupied):first'); 
var targetPos = target.position(); 
var currentPos = $(this).offset(); 
var b = $(this); 

if (target.length) { 
    target.addClass("occupied"); 
    $(".minibutton").prop("disabled", true); 
    b.clone().addClass(
    b.data("letter") == target.data("letter") ? "wordglow3" : "wordglow").appendTo("table").css({ 
     background: "transparent", 
     position: "absolute", 
     top: currentPos.top, 
     left: currentPos.left 
    }).animate({ 
     top: targetPos.top, 
     left: targetPos.left 
    }, "slow", function() { 
     $(this).css({ 
      top: 0, 
      left: 0 
     }).appendTo(target); 
     if (!$('.drop-box.spellword:not(.occupied)').length) { 
      var wordIsCorrect = 0; 
      $('.drop-box.spellword').each(function() { 
       if ($(this).attr("data-letter") == $(this).find("div").attr("data-letter")) { 
        wordIsCorrect++; 
       } 
      }); 
      console.log(wordIsCorrect); 
      console.log($('.drop-box.spellword').length); 
      if ($('.drop-box.spellword').length == wordIsCorrect) { 

       $('.drop-box.spellword').addClass('wordglow2'); 
       $(right).val('Well Done!'); 
       $(right).show(); 
       audioS.play(); 
       $('.counter').html(completeWords + '/6').show(); 
       $(wrong).hide(); 
       $('.minibutton').prop('disabled', false); 

      } else { 

       $('.drop-box.spellword').addClass("wordglow4").css('color', 'transparent'); 
       $(wrong).val('Try Again'); 
       $('.minibutton').prop('disabled'); 
       $(wrong).show(); 
       audioF.play(); 
       $('.counter').html(completeWords + '/6').show(); 
       $(right).hide(); 
       //$('.minibutton').prop('disabled', true); 
       $('.drop-box.spellword').animate({ 
        'opacity': 1 
       }, 1000, function() { 
        $(this).removeClass('wordglow4').removeClass('occupied').html('') 
       }); 
      } 


     } 
    }, function(){ 
     animation = false; 
    }); 

} 

在那裏，我用來代替回調的setTimeout。