jquery - jQuery点击功能，等待它完成再开始？

Question

在我双击/高音/等单击 .next 按钮运行脚本的那一刻，我需要它一个接一个地排队吗？我怎样才能做到这一点，以便在重新开始之前完成该功能？

HTML

<ul id="one" class="first selected">
   <li class="pic_one"></li>
   <li class="pic_two"></li>
   <li class="pic_three"></li>                       
</ul>
<ul id="two">
   <li class="pic_one"></li>
   <li class="pic_two"></li>
   <li class="pic_three"></li>                        
</ul>
<ul id="three" class="last">
   <li class="pic_one"></li>
   <li class="pic_two"></li>
   <li class="pic_three"></li>                        
</ul>

jQuery

$('.slider .next').click(function(){
   if($('.slider ul.selected').hasClass('last')){
      // leave blank
   } else {
      $('.slider ul.selected').hide('slide', { direction: "left" }, 1000);  
      $('.slider ul.selected').removeClass('selected');
      $('.slider ul').parent().next('ul').show('slide', { direction: "right" }, 1000).addClass('selected'); 
   }
});

Answer 1

类似于 Rory 的答案，但使用 :animated 伪选择器。这可以防止在动画元素时处理单击事件。

$('.slider .next').click(function(){
   if($('.slider ul.selected').is(':animated')) return;

   if($('.slider ul.selected').hasClass('last')){
      // leave blank
   } else {
      $('.slider ul.selected').hide('slide', { direction: "left" }, 1000);  
      $('.slider ul.selected').removeClass('selected');
      $('.slider ul').parent().next('ul').show('slide', { direction: "right" }, 1000).addClass('selected'); 
   }
});

Answer 2

如果我正确理解了您的问题...您只是想防止动画在多次单击时堆叠。.stop()在调用下一个动画之前使用。

例子：

$('.slider .next').click(function(){
   if($('.slider ul.selected').hasClass('last')){
      // leave blank
   } else {
      $('.slider ul.selected').stop().hide('slide', { direction: "left" }, 1000);  
      $('.slider ul.selected').removeClass('selected');
      $('.slider ul').parent().next('ul').stop().show('slide', { direction: "right" }, 1000).addClass('selected'); 
   }
});