JQuery - slide show 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 are three buttons, when you press any button, the slide show automatically goes to the photo associated with the button that you press, and you can see that the style of this button changes (when pressed and after 3 seconds have passed ).
I have one problem with this code that I am trying to fix.
Well, I'm trying to prevent any button from being pressed for one second after changing any button style, simply if you press any button you cannot press another button again for 1 second, and if the slideshow automatically uploads the photo, you cannot upload any other photo by pressing any other button for 1 second.

Answer 1

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

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

The flag is the .enable css class, only li with .enable is .enable .

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

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

First, all buttons must be interactive, so add a .enable class for all li :

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

And add a mechanism to disable the li button and turn it back on after 1 second in traverseSlideShow() :

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

Answer 2

try it,

 (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 deferred

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