防止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;
    }
);

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 );
}

正如您所看到的，此方法充滿了缺點：在當前頁面加載之前單擊另一個選項卡時會發生什么？ 如果請求被拒絕怎么辦？ 如果滿月怎么辦？

答案是：這種方法只是一個基本的示范。 適當的實施將：

1. 不包含全局變量$global_just_clicked
2. 不依賴於.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
  }


});