Question

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

问题最有可能出现在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;
    }
);

Answer 3

这就是我这样做的方式，而且效果很好。

$(document).ready(function() {
    $(".clickitey").click(function () {
        if($("#mdpane:animated").length == 0) {
            $("#mdpane").slideToggle("slow"); 
            $(".jcrtarrow").toggleClass("arrow-open");
        }
    });
});

这不是你的代码所做的事情，这是我网站上的代码，但我想指出我如何忽略动画期间发生的点击。无论如何，请告诉我这是否效率低下。谢谢。

Answer 4

我之前玩弄了代码并提出了以下修改，似乎有效：

$('#tab-list li a').click(
    function() {
        $('.tab:animated').stop(true, 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');
                }
            );
        }
        return false;
    }
);

所有发生的事情是，当点击一个新标签时，它会立即将当前动画结束，然后开始新的过渡。

Answer 5

一种方式是：

$('#tab-list ul li').one( 'click', loadPage );
var loadPage = function(event) {
    var $this = $(this);
    $global_just_clicked = $this;
    var urlToLoad = $this.attr('href');
    $('#content-area').load( urlToLoad, pageLoaded );
}
$global_just_clicked = null;
var pageLoaded() {
    $global_just_clicked.one( 'click', loadPage );
}

正如您所看到的，此方法充满了缺点：在当前页面加载之前单击另一个选项卡时会发生什么？如果请求被拒绝怎么办？如果它是满月怎么办？

答案是：这种方法只是一个基本的示范。适当的实施将：

不包含全局变量$global_just_clicked
不依赖于.load()。将使用.ajax()，并处理请求取消，点击其他标签等。

注意：在大多数情况下，您无需采取这种循环方法。我确信您可以通过对同一个标签的多次点击不会影响最终结果的方式来修复您的代码。

JRH。

Answer 6

使用此类事件的timeStamp属性来实现此目的的一种方法是在多次点击之间缩短一段时间：

var a = $("a"),
    stopClick = 0;


a.on("click", function(e) {
  if(e.timeStamp - stopClick > 300) { // give 300ms gap between clicks
     // logic here

    stopClick = e.timeStamp; // new timestamp given
  }


});

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

6 个答案: