Javascript - you need to work to go the full distance to the click

Question

I have this javascript function that I use when I clicked at a specific distance. This is used in a scroller going from left to right, which uses about 7 sections. My question is: how do I get a click to go the full distance before the click can be used again? The problem is that the user quickly presses the arrow button to reset the distance, and sometimes it may be in the middle of the image, and not to the right of the seam. What code am I missing to accomplish this?

$(function () { $("#right, #left").click(function () { var dir = this.id == "right" ? '+=' : '-='; $(".outerwrapper").stop().animate({ scrollLeft: dir + '251' }, 1000); }); }); 

Answer 1

I would think that the easiest way is to have a Boolean flag indicating whether the animation is happening:

 $(function () { var animating = false, outerwrap = $(".outerwrapper"); $("#right, #left").click(function () { if (animating) {return;} var dir = (this.id === "right") ? '+=' : '-='; animating = true; outerwrap.animate({ scrollLeft: dir + '251' }, 1000, function () { animating = false; }); }); }); 

works for me: http://jsfiddle.net/BYossarian/vDtwy/4/

Answer 2

Use .off () to unleash the click as soon as this happens, then re-attach it after the animation finishes.

 function go(elem){ $(elem).off('click'); console.log(elem); var dir = elem.id == "right" ? '+=' : '-='; $(".outerwrapper").stop().animate({ left: dir + '251' }, 3000, function(){ $("#right, #left").click(go); }); } $("#right, #left").click(function () { go(this); }); 

JsFiddle example

In this simplified example, you can see that the click event is immediately disabled after clicking on it, and then is restored after the animation is completed.

Answer 3

Use then automatic call like this

 var isMoving = false; $(function () { $("#right, #left").click(function () { if (isMoving) return; isMoving = true; var dir = this.id == "right" ? '+=' : '-='; $(".outerwrapper").stop().animate({ scrollLeft: dir + '251' }, 1000).then(function(){isMoving = false}()); }); }); 

Answer 4

I think that you will miss the fact that when you do stop (), you are actually positioning the slider at a specific point. That is, if your scroller is 1000 pixels, and you double-click the left mouse button, you will probably get

 scrollLeft: 0 - 251 scrollLeft: -2 - 251 

So, I think you should use an index, not exactly these + = and - = calculations. For instance:

 $(function () { var numberOfDivs = 7; var divWidth = 251; var currentIndex = 0; $("#right, #left").click(function () { currentIndex = this.id == "right" ? currentIndex+1 : currentIndex-1; currentIndex = currentIndex < 0 ? 0 : currentIndex; currentIndex = currentIndex > numberOfDivs ? numberOfDivs : currentIndex; $(".outerwrapper").stop().animate({ scrollLeft: (currentIndex * divWidth) + "px" }, 1000); }); }); 

The big advantage of this approach is that you don't turn off the click. You can click as many times as you want, and you can do it quickly. the script will work.

Answer 5

This will work just fine:

 var userDisplaysPageCounter = 1; $('#inventory_userdisplays_forward_button').bind('click.rightarrowiventory', function(event) { _goForwardInInventory(); }); $('#inventory_userdisplays_back_button').bind('click.leftarrowiventory', function(event) { _goBackInInventory(); }); function _goForwardInInventory() { //$('#inventory_userdisplays_forward_button').unbind('click.rightarrowiventory'); var totalPages = $('#userfooterdisplays_list_pagination_container div').length; totalPages = Math.ceil(totalPages/4); // alert(totalPages); if(userDisplaysPageCounter < totalPages) { userDisplaysPageCounter++; $( "#userfooterdisplays_list_pagination_container" ).animate({ left: "-=600", }, 500, function() { }); } } function _goBackInInventory() { //$('#inventory_userdisplays_back_button').unbind('click.leftarrowiventory'); if(userDisplaysPageCounter > 1) { userDisplaysPageCounter--; $( "#userfooterdisplays_list_pagination_container" ).animate({ left: "+=600", }, 500, function() { }); } } 

Answer 6

I second Answer to the question .

Here is a variation of his demo that skips the animation when the user clicks the button several times:

 $(function () { var targetScroll = 0, outerwrap = $(".outerwrapper"); $("#right, #left").click(function () { // stop the animation, outerwrap.stop(); // hard set scrollLeft to its target position outerwrap.scrollLeft(targetScroll*251); if (this.id === "right"){ if (targetScroll < 6) targetScroll += 1; dir = '+=251'; } else { if (targetScroll > 0) targetScroll -=1; dir = '-=251'; } outerwrap.animate({ scrollLeft: dir }, 1000); }); }); 

fiddle