Jquery - slideshow buttons function code

Question

I have this very simple slideshow here: fiddle
Jquery codes:

$("#slideshow > div:gt(0)").hide();

var maxindex = $('#slideshow > div').length;

var index = 0
var interval = 3 * 1000; // 3 seconds
var timerJob = setInterval(traverseSlideShow, interval);

function traverseSlideShow() {
    console.log("current index: " + index);

    $('#slideshow > div')
        .stop()
        .fadeOut(1000);
    $('#slideshow > div').eq(index)
        .stop()
        .fadeIn(1000);

    $('ul li').removeClass('active');
    $('ul li:eq(' + index + ')').addClass('active');
    index = (index < maxindex - 1) ? index + 1 : 0;

}

for (var i = 0; i < maxindex; i++) {
    $('ul').append('<li class="' + (i == 0 ? 'active' : '') + '"></li>');
}

$(document).on('click', 'ul li', function () {
    index = $(this).index();
    traverseSlideShow();
    clearInterval(timerJob);
    timerJob = setInterval(traverseSlideShow, interval);
});

As you can see there's three buttons, on clicking any button the slideshow automatically goes to the photo related with the button you click, and you can see the style of this button changes(on click and after passing 3 seconds).
I have one problem with this code that I'm trying to fix.
Well, I'm trying to prevent clicking any button for one second after any button's style is changed, simple, if you click any button you can not re click another button within 1 second, and as well, if the slideshow automatically loads a photo you can not load any other photo by clicking any other button within 1 second.

Answer 1

I would add a flag as css class to the button:

Working fiddle: http://jsfiddle.net/b_m_h/Jtec5/86/

The flag is a .enable css class, only li with .enable is clickable.

The event only listens for click on ul li.enable:

...
$(document).on('click', 'ul li.enable', function () {
...

At first, all button should be clickable, so add .enable class for all li:

for (var i = 0; i < maxindex; i++) {
    $('ul').append('<li class="' + (i == 0 ? 'active' : '') + ' enable"></li>');
}

And add the mechanism to disable the li button and re-enable it after 1 second in the traverseSlideShow():

function traverseSlideShow() {
    ...
    $('ul li').removeClass('enable');
    setTimeout(function(){
        $('ul li').addClass('enable');
    }, 1000);
}

Answer 2

try this,

(function(){
    $('button').on('click',function(){
    var $this=$(this);
            $this
                .attr('disabled','disabled');
                 setTimeout(function() {
                 $this.removeAttr('disabled');
                 }, 1000);
          });
     })();

Answer 3

use setTimeout in a function where b is the id of the button to be delayed

function slow_button(b) {

    $('#' + b).attr("disabled", true);
    var t = setTimeout(function(){$('#' + b).removeAttr("disabled")}, 1000);
}