Jquery - slideshow buttons function code

Jquery - slideshow buttons function code

I have this very simple slideshow here
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 before 1
second.