jqueryでのシングルアクションの複数クリックの防止！

Question

私はこのJavaScriptコードがあります：次またはPERV複数のアニメーションのユーザークリックが完全に完了し、offsetLeft値が正しくないないとき

var next = jQuery('#next') ; 
     var prev = jQuery('#prev') ; 
     var Scroller = jQuery('#Scroller') ; 
     var ScrollerTable = Scroller.children('table').width() ; 
     next.click(function(){ 
     console.log('width of scroller table ' + ScrollerTable) ; 
       var offsetLeft = parseInt(Scroller.css("left")) ; 
       console.warn(offsetLeft) ; 
       if(offsetLeft == 0) 
       { 
        Scroller.animate({left : -140 } , 1000) ; 
       }else{ 
        console.warn(offsetLeft) ; 
        if(ScrollerTable <= offsetLeft ) 
        { 
         console.warn(offsetLeft) ; 
         alert('you are reached the end of scroller use the other btn') ; 
         return false ; 
        }else{ 
         Scroller.animate({left : offsetLeft-140 } , 1000) ; 
        } 
       } 

     }); 
     prev.click(function(){ 

       var offsetLeft = parseInt(Scroller.css("left")) ; 
       console.warn('offsetLeft in backward ' + offsetLeft) ; 
       if(offsetLeft != 0 || offsetLeft > 0) 
       { 
        Scroller.animate({left : offsetLeft +140 } , 1000) ; 
       }else{ 
        jQuery(this).css('cursor' , 'none') ; 
        return false ; 
       } 
     }); 

を！それを防ぐために何ができるのですか

私の次の質問は、次のbtnをクリックしたときです。スクローラのdivは-140pxにスクロールされました。このアクションは、スライドの最後に到達するまで繰り返されなければなりません。だから私は変数のscrollerTableの幅を取得し、offsetLeftの値でそれをチェックするが、それは動作していない！ここ

とは、HTML

<table width="100%" border="0" cellspacing="0" cellpadding="0"> 
     <tr> 
     <td> 
     <div style="border:#ccc 1px solid ; padding:1px" class="scroll"> 
      <table width="100%" border="0" cellspacing="0" cellpadding="0"> 
       <tr> 
       <td width="2%"><img src="../images/dum/scroll_left.gif" width="20" height="165" id="prev" style="cursor:pointer" /></td> 
       <td width="96%" valign="top"> 
        <div style="width:720px; height:165px ; position:relative ; overflow:hidden " id="Container"> 
         <div style="position:absolute ; left:0" id="Scroller"> 
          <table cellpadding="0" cellspacing="0" border="0"> 
           <tr> 
            {foreach from=$products item=p} 
             <td> 
              <div style="border:#ccc 2px solid ; padding:0px;margin:20px;"> 
               <img src="imgsize.php?w=100&h=100&img=../uploads/product/{$p.xproductid}.jpg" /> 
               <div style="background-color:#ccc ;text-align:center ; padding:5px; ">{$p.xproductname}</div> 
              </div> 
             </td>  
            {/foreach} 
           </tr> 
          </table> 
         </div> 
        </div> 
       </td> 
       <td width="2%"><img src="../images/dum/scroll_right.gif" width="20" height="165" id="next"/></td> 
       </tr> 
      </table> 

Answer 1

私は右のあなたを理解していれば、あなたはあなたを助けることができる変数のカップルを導入する可能性があります。あなたのnext.clickしばらく（）、次に

next.click(function(){ 
    if(!nextInProgress){ 
     nextInProgress=true; 
     ... 
     nextInProgress=false; 
    } 
}); 
prev.click(function(){ 
    if(!prevInProgress){ 
     prevInProgress=true; 
     ... 
     prevInProgress=false; 
    } 
}); 

またはprev.click（）関数は、そのボタンをクリックすると、ユーザーが再び意志、進行中である：

var nextInProgress=false; 
var prevInProgress=false; 

その後、あなたはこのような何かを行うことができますアクションが完了していなければ何も返さない。

2番目の質問：jQuery element.width（）関数を使用していますか？それがあなたに期待値を与えていない場合は、CSSの左の表とCSSの右の属性値を決定し、幅を取得するために右下を引くなど、他の幅計算を行う必要があります。それはうまくいくかもしれませんが、多分私はあなたの質問を誤解しました。

Answer 2

独自のコードを使用する場合は、アニメーションコールでコールバック引数を使用することを検討してください。ボタンのクリックイベントで

：

• は左のボタンを無効にする（ .ATTRと（ "無効" "無効"）、または何らかの 他の方法）
• トリガーアニメーション
• のコールバック引数に .animate（）ボタンを再度有効にします。 コールバック関数は、 アニメーションが終了するまで実行されません。 （あなたが より複雑なアニメーションを持っている場合は、アニメーションキューを使用する 必要があるかもしれません。）彼はすでにハードワークを行っていますので、あなただけのアリエルFleslerのserialScroll pluginを使用することができます

または、。