javascript - 为什么这个setTimeout();功能不能像我想象的那样工作？

Question

我想做一个匹配卡牌类型的游戏，点击后一次显示两张牌。如果它们相同，它们将变得不活动，如果它们不同，它们将再次被覆盖。

这里是一个实现，点击后 1.5 秒卡片就会被揭开

$(document).on("click", "div.card.covered", function(){    
    if( $('div.card.uncovered').length < 2 ){
        uncover_card(this);
    }       
    if( $('div.card.uncovered').length == 2 ){
        var uncovered_cards = new Array();          
        $('div.card.uncovered').each(function(){
            uncovered_cards.push( $(this).attr("class") );
        });

        if( uncovered_cards[0] == uncovered_cards[1]){
            setTimeout(function(){
                $('div.card.uncovered').addClass("matched");
                $('div.card.uncovered').removeClass("uncovered");
                //uncover_card(this);
            },1000);                
        }else{
            setTimeout(function(){
                $('div.card.uncovered').addClass("covered");
                $('div.card.uncovered').removeClass("uncovered");
                //uncover_card(this);
            },1000);
        }
    }
});

http://jsfiddle.net/Lf8cE/2/

如果你慢慢地这样做，它就会按预期工作。

但是，如果您单击 2，然后在等待它们变得不活动或再次隐藏时疯狂地单击第三张卡，则第三张卡将在这对更改后不久，也更改为与相同的状态一对。

为什么会出现这个错误？!

Answer 1

正如 @KevinB 在评论中提到的，问题是每次单击都会添加额外的超时。当第一次超时触发时，它会从两张卡中删除 uncovered 类。现在，由于您点击速度很快，因此您发现了另一张卡片。但是，您的第二次(或第三次、第四次等)超时会触发并对任何未覆盖的卡牌起作用，从而影响这张新未覆盖的卡牌。

最简单的解决方法是将第二个 if 移到第一个 if 内，以便它只触发一次。

if( $('div.card.uncovered').length < 2 )
{
    uncover_card(this);

    if( $('div.card.uncovered').length == 2 )
    {
        var uncovered_cards = new Array();

        $('div.card.uncovered').each(function(){
            uncovered_cards.push( $(this).attr("class") );
        });

        if( uncovered_cards[0] == uncovered_cards[1])
        {
            setTimeout(function(){
                $('div.card.uncovered').addClass("matched");
                $('div.card.uncovered').removeClass("uncovered");
                //uncover_card(this);
            },1000);

        }
        else
        {
            setTimeout(function(){
                $('div.card.uncovered').addClass("covered");
                $('div.card.uncovered').removeClass("uncovered");
                //uncover_card(this);
            },1000);
        }
    }
}

http://jsfiddle.net/Lf8cE/4/