jQuery関数をキューに入れて再呼び出しが速すぎると誤動作を防ぐ方法

Question

特定のメニュー項目をクリックしたときに発生する関数を記述しました。本質的に、コードはクリックされたメニューの（ 'li'）から引き出された前記ドックの名前と共に、ページの下部にあるドックを（アクティベートされたクラスにクラスを変更することによって）置き換える。これはちょっと難しいですが、うまくいけばこれは理にかなっています。

拡張jquery-uiバージョンのaddClassとremoveClassを使用して、ドックが画面の下からスライドし、選択された交換用のドックがスライドして所定の位置に収まるようにするために、同時に、ドックの名前がフェードアウトし、置き換えられ、新しい名前が元に戻ります。

これはすごくうまくいきますが、アニメーションがまだ行われている間に別のメニュー項目を選択した場合、効果は大きくなります。アニメーションがまだ実行されている間に再び呼び出された場合、単に関数をキューに入れるために、以下のコードを変更する必要があります。また、これが複雑であることが判明した場合は、まだアクティブな間に関数が再び呼び出されるのを防ぐことができれば幸いです。

どのように私はこれについて行くだろう知っていますか？

function selectFilter($this) { 


var $filtername = $this.text(); 
var $activedock = $('.activedock'); 
$selected_dock = $('#' + $filtername); 
$name = $('#filter_name').find('h1'); 


if ($filtername == $activedock.attr('id')) { 

return false; 

} 


var $filtertext = $filtername;  
     $activedock.removeClass('activedock', 1000); 
       $name.fadeOut('1000', function() { 

        $selected_dock.addClass('activedock','1000'); 

        $name.text($filtertext); 
        $name.fadeIn('1000', function() { 

        var $menuWidth = $('#filter_name').width(); 

        $('#filter_menu').css('min-width', $menuWidth); 


        }); 
       }); 

} 

P.私はjQueryに比較的新しいので、上のコードがベストプラクティスなどを使用していない場合は私の謝罪をしています....私はまだ学んでいます。以下のコードに示すように、ユーザがメニュー項目をクリックしたときにも上記の関数が呼び出される

： -

//Show filter menu 

$(document).ready(function() { 

$('#full-width-layout_c1_col-1-1_1').on('mouseenter mouseleave click', '#filter_name', function(event) { 

var $menu = $('#filter_menu'); 
var $icon = $('#popupicon'); 


//Hover over Filter Name 
if (event.type == 'mouseenter') { 
        $menu.addClass('menu_hovered_item'); 
        $icon.show('fade', 200); 
     } 
     else if (event.type == 'mouseleave'){ 
        $menu.removeClass('menu_hovered_item'); 
        $icon.hide('fade', 200); 
      } 



//Open menu on click 
     else if (event.type == 'click'){ 


      $menu.show('fade','slow'); 

//hover or click on menu item 

        $('#full-width-layout_c1_col-1-1_1').on('mouseenter mouseleave click', '#filter_menu li', function(event) { 

        var $menuItem = $(this); 

          if (event.type == 'mouseenter') { 
          $menuItem.addClass('menu_hovered_item'); 
          } 
          else if (event.type == 'mouseleave'){ 
          $menuItem.removeClass('menu_hovered_item'); 
          } 

          else if (event.type == 'click'){ 
          var $this = $(this); 
          selectFilter($this); 
          $menu.hide(); 
          } 

        }); 

     }  

    }); 
}); 

Answer 1

アニメーション

を検出アニメーションがまだあるかどうかを検出することが可能です特定の要素に対して実行されます。

このテクニックはthis articleで詳述されています。

var wait = setInterval(function() { 
    if(!$("#element1, #element2").is(":animated")) { 
     clearInterval(wait); 
     // This piece of code will be executed 
     // after element1 and element2 is complete. 
    } 
}, 200); 

防止アニメーションキューBuilup

また、あなたはthis techniqueをbyusingアニメーションキューを防ぐSLOすることができます。

Answer 2

使用、stop(true, true)、各アニメーション機能の前に、

のような：$(this).stop(true, true).fadeIn()、

$(this).stop(true, true).fadeOut()、

$(this).stop(true, true).show('fade','slow')。

stopの最初のtrueは、アニメーションキューを消去し、2番目のtrueは、実行中のアニメーションを直ちに完了させます。