防止单击事件并等待CSS转换完成

Question

JSFiddle

$('button').click(function(){
    $('p').removeClass('hidden').delay(1000).queue(function(next) {
        $(this).addClass('hidden');
        next(); 
    });
});

我想使用CSS转换和jQuery的延迟功能来淡入一些文本，然后在设定的时间后淡出。问题是，如果我多次点击按钮，它会设置多个延迟，点击事件就会变得很奇怪。我再也无法预测文本何时会淡出。有没有办法阻止单击事件在整个过渡(淡入、延迟，然后淡出)完成之前一直在传播？

Answer 1

您可以使用绑定点击

var myfunction = function (){
    $('p').removeClass('hidden').delay(1000).queue(function(next) {
        $(this).addClass('hidden');
        next(); 
        $('button').one('click', myfunction);
    });
}
$('button').one('click', myfunction);

或

您可以使用解除绑定事件

var myfunction = function (){
    $('button').off('click');
    $('p').removeClass('hidden').delay(1000).queue(function(next) {
        $(this).addClass('hidden');
        next(); 
        $('button').on('click', myfunction);
    });
}
$('button').on('click', myfunction);

Answer 2

您可以添加此条件：

if($('p').queue())

就像这样：

$('button').click(function(){

    if($('p').queue()) $('p').removeClass('hidden').delay(1000).queue(function(next) {
        $(this).addClass('hidden');
        next(); 
    });
});