javascript - 每个图 block 的 jQuery onclick 延迟超时

Question

http://codepen.io/umbriel/pen/XJMgYX

您好，我有一个产品网格。当您单击绿色添加按钮时，我有一个工具提示会出现在每个相应的网格元素上。此工具提示将在 3 秒后自动消失，除非您再次单击添加按钮最终重置超时。从而使工具提示保持更长的可见时间。

现在，当您只在一个图 block 上执行此操作时，效果很好。但是，当您转到下一个图 block 并在前一个图 block 超时期间单击添加按钮时，前一个图 block 的工具提示将永远保持可见，这不是预期的。我也希望它消失。

无论您点击哪个添加按钮，是否总有超时按预期工作？

谢谢

$purchasePlus.on('click', function(){

var $confirmationBadge = $(this).parent().parent().parent().find('.tile__promotion');
$confirmationBadge.addClass('flip');
clearTimeout(timer);   
timer = setTimeout(function(){
    $confirmationBadge.removeClass('flip');
},1500);        


$(this).css({
    'min-width':'40px'
}).addClass('tile__animate').html('+');
var $text = $(this).siblings().find('.purchase--input');
$text.val(parseInt($text.val(), 10) + 1);
setTimeout(function() {
    $text.removeClass('focus');
}, 2000);
if($text.val() > 1) {
    $text.addClass('focus');
    $(this).siblings().find('.purchase--input').addClass('focus');
}
});

Answer 1

可能有更好的方法，但您可以检查当前目标是否与之前的目标相同。如果是，请清除间隔。如果不是，则将 previousTarget 设置为当前目标:

if(e.target == previousTarget){     
    clearTimeout(timer);   
}else{
    previousTarget = e.target;
}

FIDDLE