Prevent Multiple click for single action in jquery !

Question

i have this javascript code :

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 ;
       }
     });

when user click on next or perv multiple animation will not completely complete and offsetLeft value is not correct ! what can i do to prevent that

my second question is when user click on next btn the scroller div scrolled to -140px left this action must iterate until to reach to end of slides then i must disable the next btn . so i get scrollerTable width in a variable and check it with offsetLeft Value but it's not working !

and here is 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

If I understand you right, you could introduce a couple of variables that could help you out.

var nextInProgress=false;
var prevInProgress=false;

Then, you could do something like this:

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

Then, while your next.click() or prev.click() functions are in progress, a user clicking that button again will yield nothing unless the action has completed.

As for your second question: are you using the jQuery element.width() function? If that's not giving you an expected value, you may have to do some other width calculations, such as determining the tables CSS left and CSS right attribute values, and subtracting, right-left to get the width. That may work, but maybe I misunderstood your question.

Answer 2

If you want to use your own code, consider using the callback argument on your animation call.

On the click event for the button:

• disable the left button (with an .attr("disabled","disabled") or some other method)
• trigger your animation
• in the callback argument of .animate() re-enable the button. The callback function won't execute until the animation finishes. (If you have more complicated animation you may need to use an animation queue.)

Or, you could just use Ariel Flesler's serialScroll plugin since he's done the hard work already.