javascript - Need onclick to go full distance before click works again

Question

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 ho

Answer 1

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.

Answer 2

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.net/BYossarian/vDtwy/4/

Answer 3

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

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 completes.

Answer 4

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() {

        });
    }

}

Answer 5

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

Answer 6

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

});