Disable A Next/previous Button(link) Temporarily When Clicked In Jquery Cycle Plugin (not Necessarily A Jquery Cycle Issue)

I need to prevent link from being clicked for let's say 2 seconds. Here is an example http://jsbin.com/orinib/4/edit When you look at the rendered mode you see next and prev links.

Solution 1:

Take a look at the cycle options page. There are a number of ways to do this. I would consider using the pager event onPrevNextEvent. You can assign a callback function.

$('#slideshow').cycle({ 
    pager:  '#nav', 
    onPrevNextEvent: function(isNext, zeroBasedSlideIndex, slideElement)  { 
        //disable controls
    },
    after: function(currSlideElement, nextSlideElement, options, forwardFlag) {
        //reenable controls
    }
});

Solution 2:

The following will temporarily prevent clicks while a slideshow is running, as shown in this fiddle:

$.fn.extend({
    delayClick: function(callback) {
        this.bind('click', function(e) {
            $self = $(this);
            if( $self.hasClass('disabled') ) {
               $('#log').append('<p>click prevented on '+$self.attr('id')+'</p>');
            } 
            else {
               $self.addClass('disabled');
               callback.call(this, [arguments]);
               setTimeout(function() {
                   $self.removeClass('disabled');
               }, 1000);
            }
            returnfalse; 
        });
    } 
});