jquery - 延迟第二次点击，直到 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.

    }
}