延迟第二次点击，直到 animate.css 完成动画

Question

我有一个对象，当单击它时，它将淡出屏幕，当单击另一个对象时，它将淡入屏幕。

一旦对象消失，属性 Visibility:hidden 将被应用，但在对象返回之前，可见性设置为可见，在动画播放之前。否则它只会在屏幕上弹出。

问题是，当你点击对象太快时，在之前的动画完成之前，之前的可见性并没有恢复，因此两个对象最终被隐藏了。

我提供了我当前的工作代码。只要您花时间单击对象，这将非常有效，但是如果单击太快就会中断。

$(document).ready(function(){
console.log("[debug] - Script loaded ...")

//////////////////////////////////////////////////
//                   Variables                  //              
//////////////////////////////////////////////////

    var allCards = $(".card")
    var selectedCard
    var animationEnded
    var removeClasses = "animated fadeOutUp fadeInDown"
    var pullCardOut = "selected-card animated fadeOutUp"
    var putCardBack = "animated fadeInDown"

// Assign a unique ID Number to each card ...
    allCards.attr('id', function(i) {
        console.log("[debug] - Assigned " + (i+1) + " cards a unique ID.")
        return 'card'+(i+1);
    });

//////////////////////////////////////////////////
//                  Card Click                  //              
//////////////////////////////////////////////////

    allCards.click(function(event){   
        // Get the unique ID of which card was clicked and store it in "cardClicked" variable ...
        var cardClicked = event.target.id;
        var selectedCard = $("#" + cardClicked)
        var animationEnded = "webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend"
        var previouslySelectedCard = null

        // Dump the clicked card to the console ...
        // console.log("[debug] - cardClicked = "+cardClicked+" ...")
        console.log("[debug] - selectedCard = " + selectedCard + " ... (WHAT?)")
        console.log("[debug] - " + cardClicked + " was clicked");

        // Find any current card that may already be the selected card,
        //   and remove the previously selected card, before selecting the new card.

        if ($("#all-cards").find("div.selected-card").length !== 0) {
            console.log("[debug] - Found a selected card")
            // Find the card number of the previously clicked card
            var previouslySelectedCard = $('.selected-card').attr('id');

            console.log("#" + previouslySelectedCard + " was previously selected")
            $("#" + previouslySelectedCard).css("visibility", "visible");
            $("#" + previouslySelectedCard).removeClass(pullCardOut).addClass(putCardBack).one(animationEnded, function() {

            });

        } else {
            console.log("[debug] - No cards currently selected")
        }


        //Step 2: Add the appropriate classes to fade the card up.
        //selectedCard.removeClass("selectedCard "+removeClasses);

        selectedCard.addClass(pullCardOut).one(animationEnded, function() {
            selectedCard.css("visibility", "hidden");
        });

        //Step 3: Return the card to the holder, if anywhere else on the page is clicked.
        //  Remove all associated classes and reset the state back to a refreshed page.
    });

});

我的代码在这里有一个工作模型：http://jsfiddle.net/swox9a0y/3/，这可能更容易理解发生了什么。

我的问题是，在初始淡出动画和可见性设置之前，如何禁用点击第二个对象？

Answer 1

您可以分配一个变量检查​​以防止在超时完成之前再次单击，或者使用Promise。

//Create a variable to track if element is animating
var elementIsAnimating = false;

//Inside click function, set the variable to true.
allCards.click(function(event){  

    //Check if element is animating
    if (!elementIsAnimating) { 

        ...

        selectedCard.addClass(pullCardOut).one(animationEnded, function() {
            selectedCard.css("visibility", "hidden");
            elementIsAnimating = false;
        });
        elementIsAnimating = true; //This executes right after the class is added, preventing any future clicks until it is false again.

    }
}

Answer 2

只需在被点击的元素上将 pointer-events 设置为“none”，然后在与动画相同的时间将其恢复为“auto”。所以如果你的动画持续 1 秒：

$('.my_button').click(function() {
    $(this).css('pointer-events', 'none')
    setTimeout(function() {
    $(this).css('pointer-events', 'auto')
    }, 1000)
})

这可以防止点击事件的任何快速触发。