清除jQuery的點擊隊列

Question

我具備的功能：

$(function(){ 
    $("#mydiv").click(function(){ 
if ($(this).hasClass('positive')) { 
    $(this).delay(400).animate({right:'-210px'},1000) 
      .addClass('negative').removeClass('positive') 
} else { 
    $(this).delay(400).animate({right:'10px'},1000) 
      .addClass('positive').removeClass('negative') 
} 
}).clearQueue() 
}); 

但是，如果我在我的div點擊上千次，它將執行動畫一千倍。 我試圖購物Jquery API文檔，但.clearQueue()（如在函數中）或.stop(true)似乎工作。

Answer 1

請確保您在調用delay()之前使用stop(true)。以下應該做你想做的：

$('#mydiv').click(function() { 
    if ($(this).hasClass('positive')) { 
     $(this) 
      .addClass('negative') 
      .removeClass('positive') 
      .stop(true) 
      .delay(400) 
      .animate({ right: '-210px' }, 1000); 
    } else { 
     $(this) 
      .addClass('positive') 
      .removeClass('negative') 
      .stop(true) 
      .delay(400) 
      .animate({ right: '10px' }, 1000); 
    } 
}); 

例子jsFiddle。

Answer 2

您應該在處理程序的開始處解除綁定您的元素。 當動畫準備就緒時，再次綁定處理程序。

$(function(){ 
    $("#mydiv")click(function stg(e){ 
     var elem=$(e.target); 
     elem.off('click',stg); 
     if ($(this).hasClass('positive')) { 
      $(this).delay(400) 
        .animate(
        {right:'-210px' 
        ,complete:function(){elem.on('click',stg)} 
        },1000) 
        .addClass('negative').removeClass('positive') 
     } else { 
      $(this).delay(400) 
        .animate(
        {right:'10px' 
        ,complete:function(){elem.on('click',stg)} 
        },1000) 
       .addClass('positive').removeClass('negative') 
     } 
    }) 
}); 

只有在動畫後再次爲元素設置動畫時，才需要完成回調。