禁用点击事件直到动画完成

Question

禁用点击事件直到动画完成

javascriptjquery

8

在我的游戏中，我有一个用单词填充的网格。为了拼写单词，用户必须点击侧边栏上称为“拖动”的字母。当点击字母时，它会动画地移动到网格上的位置。

问题在于用户可以快速点击字母，导致程序崩溃。为解决此问题，我想禁用点击事件，直到动画完成。

过去我曾使用setTimeOut函数，但这不是一种可靠的方法，因为时间取决于浏览器速度。

以下是点击事件：

$('.drag').on('click', function (e) {
    e.preventDefault();
    var target = $('.highlight-problem .drop-box:not(.occupied):first');
    var targetPos = target.parents('td').position();
    console.log(targetPos);
    var currentPos = $(this).offset();
    var b = $(this);
    if (target.length) {
        target.addClass("occupied");
        $(".occupied").parent(".flip-wrapper").addClass("flipped");
        var clonedObject = b.clone()
        if (b.data("letter") == target.parents('td').data("letter")) {
            clonedObject.addClass("right-letter");
            target.addClass('right-letter');
            setTimeout(function () {
                hitSound.play();
            }, 550);
        } else {
            clonedObject.addClass("wrong-letter");
            target.addClass('wrong-letter');
            setTimeout(function () {
                missSound.play();
            }, 550);
        }
        clonedObject.appendTo("table").css({
            position: "absolute",
            top: currentPos.top,
            left: currentPos.left
        }).stop().animate({
            top: targetPos.top,
            left: targetPos.left
        }, "slow", function () {
            $(this).prop('disabled', false).css({
                top: 0,
                left: 0
            }).appendTo(target);
            var spellWord = $('.highlight-problem .drop-box');
            if (!spellWord.filter(':not(.occupied)').length) {
                var wordIsCorrect = 0;
                spellWord.each(function () {
                    if ($(this).parents('td').data("letter") == $(this).find("div").data("letter")) {
                        console.log('letter is: ' + $(this).find("div").data("letter"))
                        wordIsCorrect++;
                    }
                });

- Milo-J

可能是重复的问题 jQuery - Disable Click until all chained animations are complete API .is(':animated') 或者 $(':animated').length 可以帮助你！ :) - Tats_innit

要不要在动画完成之前显示一个加载旋转图标？ - TRR

创建一个变量，在动画结束时设置它，并将在单击时运行的函数包装在if语句中，检查变量是否已设置，只有在已设置时才运行。 - Sean Lang

我认为它不是那么相似，否则我就会使用它。 - Milo-J

2个回答

1

目前无法测试代码，但在 click 函数中检查元素是否未经过动画应该会起作用。

if(!$('selector:animated')){


}

- Ohgodwhy

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Praveen Kumar Purushothaman · Accepted Answer

你可以简单地通过以下3个步骤完成。

Declare a global variable called animationComplete and set it to false.
```
var animationComplete = false;
```

In your .animate({...}); function, toggle the value after the animation is complete.

.animate({
    top: targetPos.top,
    left: targetPos.left
}, "slow", function () {
    ...
    animationComplete = true;
});

Check for the completeness using the global variable.
```
if (animationComplete)
{
    // Do something!
}
```

完整代码

JavaScript

animationComplete = true;
$(document).ready(function(){
    animationComplete = false;
    $(".background").animate({
        height: 50,
        width: 50
    }, 10000, function(){
        animationComplete = true;
    });
    $("button").click(function(){
        if (animationComplete)
            $(".background").animate({
                height: 200,
                width: 200
            }, 10000, function(){
                animationComplete = false;
            });
        else
            alert("Please wait till the animation is complete!");
    });
});

HTML

<div class="background"></div>
<button>Click me!</button>

CSS

.background {background: red;}

禁用点击事件直到动画完成

完整代码

Fiddle: http://jsfiddle.net/KAryP/

可以在这里用Fiddle编辑你的代码: http://jsfiddle.net/smilburn/Dxxmh/94/