JS/Jqueryアニメーションコードフローのバグを回避するには？

Question

ここではJqueryを使用して、基本的なタブ機能（さまざまなガイドに従っています）のイベントリスナーをさまざまなLIに追加しています。私は、ユーザーのスピードが、コンテンツタブの1つのレンダリングを終了する前にコードを停止またはスキップするように見えるLIをクリックしない限り、正常に動作するようです。

これを回避するには、次のキューに入れられたクリックを実行する前に正しく表示されるようにいくつかのコードを追加する必要がありましたが、一度に複数回クリックすると、私は確信しています、どんな助けも大いに評価されるでしょう。

$(".tab-panels .tabs li").on("click", tab); 
 
function tab() { 
 
    var $location = $(this).closest(".tab-panels"); 
 
    var $panel = $(this).attr("rel"); 
 
    if (!$(this).hasClass("active")) { 
 
     $($location).find(".tabs li.active").removeClass("active"); 
 
     $(this).addClass("active"); 
 

 
     $($location).find(".panel.active").slideUp(300, panelShow); 
 
    } 
 
    //$($location).find(".panel.active").removeClass("active"); 
 

 
    function panelShow() { 
 
     $(this).removeClass("active"); 
 
     $("#" + $panel).slideDown(300); 
 
     $("#" + $panel).addClass("active"); 
 
    } 
 

 
}

/*#region tabs*/ 
 
.tab-panels ul li { 
 
    list-style-type: none; 
 
    display: inline-block; 
 
    background: #999; 
 
    margin: 0; 
 
    padding: 3px 10px; 
 
    border-radius: 10px 10px 0 0; 
 
    color: #fff; 
 
    font-weight: 200; 
 
    cursor: pointer; 
 

 
} 
 
.tab-panels ul li:hover { 
 
    color: #fff; 
 
    background: #666; 
 
} 
 

 
.tab-panels ul li.active { 
 
    color: #fff; 
 
    background: #666; 
 
} 
 

 
.tab-panels .panel { 
 
    display:none; 
 
    background: #c9c9c9; 
 
    padding: 30px; 
 
    border-radius: 0 0 10px 10px; 
 
} 
 

 
.tab-panels .panel.active { 
 
    display:block; 
 
} 
 
/*#endregion*/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="tab-panels"> 
 
      <ul class="tabs"> 
 
       <li rel="panel1" class="active">panel1</li> 
 
       <li rel="panel2">panel2</li> 
 
       <li rel="panel3">panel3</li> 
 
       <li rel="panel4">panel4</li> 
 
      </ul> 
 

 
      <div id="panel1" class="panel active"> 
 
       content1<br/> 
 
       content1<br/> 
 
       content1<br/> 
 
       content1<br/> 
 
       content1<br/> 
 
      </div> 
 
      <div id="panel2" class="panel"> 
 
       content2<br/> 
 
       content2<br/> 
 
       content2<br/> 
 
       content2<br/> 
 
       content2<br/> 
 
      </div> 
 
      <div id="panel3" class="panel"> 
 
       content3<br/> 
 
       content3<br/> 
 
       content3<br/> 
 
       content3<br/> 
 
       content3<br/> 
 
      </div> 
 
      <div id="panel4" class="panel"> 
 
       content4<br/> 
 
       content4<br/> 
 
       content4<br/> 
 
       content4<br/> 
 
       content4<br/> 
 
      </div> 
 
     </div> 
 

 

 

 
     <div class="tab-panels"> 
 
      <ul class="tabs"> 
 
       <li rel="panel5" class="active">panel5</li> 
 
       <li rel="panel6">panel6</li> 
 
       <li rel="panel7">panel7</li> 
 
       <li rel="panel8">panel8</li> 
 
      </ul> 
 

 
      <div id="panel5" class="panel active"> 
 
       content5<br/> 
 
       content5<br/> 
 
       content5<br/> 
 
       content5<br/> 
 
       content5<br/> 
 
      </div> 
 
      <div id="panel6" class="panel"> 
 
       content6<br/> 
 
       content6<br/> 
 
       content6<br/> 
 
       content6<br/> 
 
       content6<br/> 
 
      </div> 
 
      <div id="panel7" class="panel"> 
 
       content7<br/> 
 
       content7<br/> 
 
       content7<br/> 
 
       content7<br/> 
 
       content7<br/> 
 
      </div> 
 
      <div id="panel8" class="panel"> 
 
       content8<br/> 
 
       content8<br/> 
 
       content8<br/> 
 
       content8<br/> 
 
       content8<br/> 
 
      </div> 
 
     </div>

Psが：私はまた、次の行をpanelShow機能を除去し、クラス除去を追加しようとしたバグを修正したが、その後、最初のコードを実行してから切り替えるときにしゃっくりを追加した、上デフォルトのパネルが別のパネルに表示されます。

Answer 1

停止.stop()

...").stop().slideDown(...) 
...").stop().slideUp(...)