I have this javascript function I use that when clicked goes a certain distance. This is used within a scroller going left to right that uses about 7 divs. My question is how do I get the click to go the full distance first before the click can be used again? The issue is if the user rapidly clicks on the arrow button it resets the distance and sometimes can end up in the middle of an image instead of right at the seam. What code am I missing to acplish this?

$(function () {  

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

});

I have this javascript function I use that when clicked goes a certain distance. This is used within a scroller going left to right that uses about 7 divs. My question is how do I get the click to go the full distance first before the click can be used again? The issue is if the user rapidly clicks on the arrow button it resets the distance and sometimes can end up in the middle of an image instead of right at the seam. What code am I missing to acplish this?

$(function () {  

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

});

• javascript
• jquery

• 1 why don't you disable and enable in your javascript function? – Venkata Krishna Commented Sep 19, 2013 at 14:06
• @Krishna I don't know how to do that – Keith Commented Sep 19, 2013 at 14:06
• You can do $(this).prop('disabled',true) & then false at the end.. – Venkata Krishna Commented Sep 19, 2013 at 14:06
• do you mind showing me with the script I have? – Keith Commented Sep 19, 2013 at 14:08

6 Answers 6

I would've thought that the easiest way would be to have a boolean flag indicating whether or not the animation is taking place:

$(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/BYossarian/vDtwy/4/

Use .off() to unbind the click as soon as it occurs, then re-bind it once the animation pletes.

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

You can see in this simplified example that the click event is unbound immediately after clicking, and then rebound once the animation pletes.

Use an automatic then 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}());
  });

});

I think that you miss the fact that when you make stop() you actually position the slider at some specific point. I.e. if your scroller is 1000px and you click left twice very quickly you will probably get

scrollLeft: 0 - 251
scrollLeft: -2 - 251

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

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

});

A big benefit of this approach is that you are not disabling the clicking. You may click as many times as you want and you can do that quickly. The script will still works.

This will work perfectly 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() {

        });
    }

}

I second BYossarian's answer.

Here is a variation on his demo, which "skips" the animation when the user clicks several times quickly on the buttons :

$(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