CODEWITHSUNDEEP
jqueryeventsjquery-events
Dan
Dan

Reputation: 1295

When a link uses jQuery to do an animation prevent button being clickable again until finished

I have a button at the side of a page that enables a user to go to the next slide (page).

Because the page size can be different widths this is calculated at the beginning.

So what the link does is run an animation. If I double click the button though it animates too far.

Here is the code I have:

jQuery(".nextSlide").click(function() {

slide("forward", pageSize);
    //for now assume pageSize is 950

});

function slide(data, pageSize) {
 var newLeft = calcLeft(data, pageSize);
 jQuery('#pageHolder').animate({
    left: newLeft
 }, 400, function() {
    calcNav(pageSize);
    calcPage(pageSize);
 });

}

function calcLeft(action, pageSize){
    // there will only ever be 4 slides. 0 is pos1)
var currentPos = currentPosition();
if (action == "back") {
    if (currentPos == "0") {
        left = -pageSize * 3;
    } else {    
        left = currentPos + pageSize ;  
    }

} else if (action == "forward") {

    if (currentPos == -pageSize * 3) {

        left = 0;
    } else {
        left = currentPos - pageSize ;  
    }
return left;    
}

function currentPosition() {
    var currentPosition = parseInt(jQuery("#pageHolder").css("left"), 10);
    return currentPosition;
}

So if the user clicks the button:

<a href="#" class="nextSlide">next</a>

twice this can mess up the animation.

Is there any way of making sure that either

a) when the button is pressed it cant be pressed again until the animation has completed?

or

b) slides to the next slide and then runs the animation again?

Upvotes: 0

Views: 43

Answers (2)

Dan
Dan

Reputation: 1295

Working example

jQuery(document).ready(function () {
 jQuery(".touchslider-prev").on("click", clickHandlerPrev);
});

function clickHandlerPrev(event) {

// If event isn't already marked as handled, handle it
if(event.handled !== true) {

    // Kill event handler, preventing any more clicks
    jQuery(".touchslider-prev").off("click");

    // Do your stuff here

    slide("back");

    // Mark event as handled
    event.handled = true;
} 


return false;
}

function slide(data) {

var newLeft = calcLeft(data, 950);

  jQuery('#pageHolder').animate({
    left: newLeft
  }, 400, function() {
    calcNav(950);
    calcPage(950);
    jQuery(".touchslider-prev").on("click", clickHandlerPrev);


  });

}

Upvotes: 0

Taz
Taz

Reputation: 1303

Bind your click event to a function so you can control click handling yourself. That function should do as follows:

function clickHandler(event) {

    // If event isn't already marked as handled, handle it
    if(event.handled !== true) {

        // Kill event handler, preventing any more clicks
        $(".nextslide").die("click");

        // Do your stuff here
        slide("forward", pageSize);

        // Mark event as handled
        event.handled = true;
    }
    // Else
    return false;
}

// Bind click to handler for the first time
$('.nextslide').live("click", clickHandler);

This will kill the event on the element if it's already been clicked.

Then at the end of your animation, rebind the event:

// Rebind refresh click handler
$('.nextSlide').live("click", clickHandler);

Upvotes: 1

Related Questions