防止jQuery中的click事件多次触发

Question

我创建了一个jQuery内容切换器.一般来说,它工作正常,但它有一个问题.如果多次单击侧面的链接,有时会显示多条内容.

问题最有可能出现在click事件中.这是代码:

$('#tab-list li a').click(
    function() {
        var targetTab = $(this).attr('href');
        if ($(targetTab).is(':hidden')) {
            $('#tab-list li').removeClass('selected');
            var targetTabLink = $(this).parents('li').eq(0);
            $(targetTabLink).addClass('selected');
            $('.tab:visible').fadeOut('slow',
                function() {
                    $(targetTab).fadeIn('slow');
                }
            );
        }
        return false;
    }
);

我已经尝试为转换添加锁定,以便在转换发生时忽略进一步的点击,但无济于事.我还尝试使用以下内容防止在某些内容已经动画时触发转换:

if ($(':animated')) {
    // Don't do anything
}
else {
   // Do transition
}

但它似乎总是认为事物是动画的.有什么想法可以防止多次触发动画？

Answer 1

一个想法是在函数开始时删除click事件,然后在动画结束时重新添加click事件,因此在持续时间内点击将无效.

如果你能够在动画结束时执行代码,那么这应该可行.

Answer 2

添加一个变量用作锁而不是(:动画).

在单击时,检查是否已设置锁定.如果没有,请设置锁定,启动进程,然后在fadeIn完成时释放锁定.

var blockAnimation = false;

$('#tab-list li a').click(
    function() {
        if(blockAnimation != true){
        blockAnimation = true;
        var targetTab = $(this).attr('href');
        if ($(targetTab).is(':hidden')) {
            $('#tab-list li').removeClass('selected');
            var targetTabLink = $(this).parents('li').eq(0);
            $(targetTabLink).addClass('selected');
            $('.tab:visible').fadeOut('slow',
                function() {
                    $(targetTab).fadeIn('slow', function(){ blockAnimation=false; });
                }
            );
        }
        }
        return false;
    }
);