Jquery .click toggle işlevinin aşırı ve fazla üzerinden koşmasını önleyen

Question

jQuery'de bir .clicktoggle işlevi yapıyorum ve hayatım boyunca .stop gibi bir efekt alamıyorum, temelde istemiyorum Eğer mash tıklandığında oynar.

Bu işlevin kendi kendine yeteceği şekilde uygulanmasını istiyorum;

JS fiddle link

.Tıklama Geçiş

(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> 

yüzden bir bir çek ekleyerek burada

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

Bu örnek sadece bir şey yapıyor değilken tıklayın olanak tanıyan basit geçiş sağlar. IRC üzerinde açıkladım, ancak burada bir örnek olarak, işlev yalnızca doing yanlış olarak ayarlandığında çalışır, bu yalnızca fadeIn() veya geri arama işlevi thingymajigger'den sonra ayarlandığında olur.

Answer 2

bunu sormak yararlı olabileceğini düşündük kullanacağı insanların bir şey sürü gibi görünüyor boolean değişkeni fadeInProgress, yalnızca fadeInProgressfalse ise animasyonu sıraya koyabilirsiniz. Daha sonra değeri true olarak ayarlar ve animasyonu yürütür. Animasyon tamamlandığında, değeri false olarak ayarlayın.

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