Javascript 在再次单击之前超时

在我的拼写游戏中，用户点击字母来拼写单词。单击字母时，它会在正确的区域中显示动画

问题是，当您单击它们以加快速度时，动画会出现混乱，字母会重叠

为了解决这个问题，我想在再次单击可单击的对象之前添加1或2秒的超时

我将如何执行此操作，以及将其放在代码中的什么位置？

这是可单击项的代码

$('.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('')
                });
            }


        }
    });

}

谢谢

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而不是callback。

我在答案中列出了完整的列表。谢谢，但现在它根本不允许用户单击字母。这是一把小提琴@Arthur HalmaI更新了我的答案。请使用setTimeout而不是SetInterval谢谢，但这一个不起作用。你能再看看吗？另外，旧版本只适用于第一个单词@Arthur Halmastrange，它适用于我：（在所有单词上使用3sec延迟传递进行测试）