防止JQuery的.click切換功能運行反覆多餘的點擊

Question

Im在jQuery中建立一個.clicktoggle函數，對於我的生活我無法得到.stop的效果，基本上我不想它會一遍又一遍地播放點擊混搭。

我想要它被應用的功能，所以它的自我包含，這就是我卡住的地方。

JS fiddle link

(function($) { 
    $.fn.clickToggle = function(func1, func2) { 
    var funcs = [func1, func2]; 
    this.data('toggleclicked', 0); 
    this.click(function() { 
     var data = $(this).data(); 
     var tc = data.toggleclicked; 
     $.proxy(funcs[tc], this)(); 
     data.toggleclicked = (tc + 1) % 2; 
    }); 
    return this; 
    }; 
}(jQuery)); 

$('div').clickToggle(function() { 
    $('.testsubject').fadeOut(500); 
}, function() { 
    $('.testsubject').fadeIn(500); 
}); 

---

<div class="clickme">click me fast</div> 
<div class="testsubject">how do i stop it playing over and over if you click alot</div> 

切換。點擊好像人很多東西會用，所以我想這可能是有用的在這裏提出它

Answer 1

var clicked = false; 
var doing = false; 

$(".clickme").click(function(e) { 
    if (doing) { 
    return; 
    } else { 
    doing = true; 
    } 
    doing = true; 
    clicked = !clicked; 
    if (clicked) { 
    $('.testsubject').fadeOut(700, function() { 
     doing = false 
    }); 
    } else { 
     $('.testsubject').fadeIn(700, function() { 
     doing = false; 
    }); 
    } 
}); 

這個例子是一個簡單的切換隻允許你當它沒有做任何事情點擊。我在IRC上解釋過，但作爲一個例子，這個函數只在doing設置爲false時纔會運行，只有在fadeIn()或fadeOut的回調函數thingymajigger之後設置。

Answer 2

通過增加檢查到布爾變量fadeInProgress，如果fadeInProgress爲false，則可以選擇僅排隊動畫。然後它將該值設置爲true並執行動畫。動畫完成後，將值設置爲false。

var fadeInProgress = false; 
$('div').clickToggle(function() { 
    if (!fadeInProgress) { 
    fadeInProgress = true; 
    $('.testsubject').fadeOut(700, function(){fadeInProgress = false;}); 
    } 
}, function() { 
    if (!fadeInProgress) { 
    fadeInProgress = true; 
    $('.testsubject').fadeIn(700, function(){fadeInProgress = false;}); 
    } 
});