javascript - jQuery setTimeout $this.remove() 多个元素重叠

Question

我有 2 个独立的 <div>具有相似 invoke 的元素添加透明覆盖消息的按钮。我的问题是，当我快速连续单击两个按钮时，或者在超时到期前两次单击同一个按钮时，叠加层只会被删除一次(而不是叠加添加许多叠加层)。如果有人能帮我整理我的代码(这看起来效率很低)，我将不胜感激。

JSFiddle: http://jsfiddle.net/Hybridx24/733ueao4/

$(document).on('click', '#invoke', function(e) {

    $this = $(this);

    $cardOverlay = $("<div style='transition: background 0.2s linear' class='card-overlay'><span style='color:white;position:relative;top:40%;font-weight:bold'>Success!</span></div>");

    $this.parent('.card-shadow').append($cardOverlay);

    $cardOverlay.height('100%').css({
        'opacity' : 1,
        'position': 'absolute',
        'top': 0,
        'left': 0,
        'background': 'rgba(0, 0, 0, 0.6)',
        'width': '100%',
        'z-index': 1,
        'border-radius': '6px',
        'text-align': 'center'
    });

    setTimeout(function() {
        $cardOverlay.fadeOut("normal", function(){
            $(this).remove();
        })
    }, 2000)
});

Answer 1

您在 $cardOverlay 之前忘记了 var，因此 $cardOverlay 是在全局范围内定义的，并且相同 每次处理程序运行时的变量。每次单击 #invoke 时都会覆盖它的值，这意味着当 setTimeout 运行时，它总是指对 $cardOverlay 的最新分配> 所以对旧覆盖的引用丢失了。变化:

$cardOverlay = $("<div style='transition: background 0.2s linear' class='card-overlay'><span style='color:white;position:relative;top:40%;font-weight:bold'>Success!</span></div>");

到

var $cardOverlay = $("<div style='transition: background 0.2s linear' class='card-overlay'><span style='color:white;position:relative;top:40%;font-weight:bold'>Success!</span></div>");

出于类似的原因，您可能还想在 $this = $(this); 之前添加 var。请记住，虽然您可以在 javascript 中省略 var，但每次您这样做时，变量都是在全局范围内定义的，并且可能会出现其他方法(或者相同的方法可能会运行第二次)并干扰变量的值。一般来说，如果您使用的是您只想在特定范围内访问的变量，则应在该范围内使用 var 定义它，在您的情况下是您的处理函数。