javascript - 防止jQuery中的点击事件多次触发

Question

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

问题很可能出在点击事件的某处。这是代码:

$('#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

一个想法是在函数开始时删除点击事件，然后在动画结束时重新添加点击事件，这样在持续时间内的点击将没有效果。

如果您能够在动画结束时执行代码，这应该可行。