jQuery的 - 幻灯片按钮的功能代码

Question

我有这个非常简单的幻灯片在这里：fiddle
的Jquery代码：

$("#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); 
}); 

正如你可以看到有三个按钮，在点击任何按钮，幻灯片自动进入照片相关与按钮点击，你可以（通过3秒后点击）看到这个按钮的样式更改。
我有一个问题，这个代码，我试图修复。
嗯，我正在试图防止点击任何按钮一秒钟任何按钮的样式更改后，简单的，如果你点击任何按钮，你不能再点击1次，和内的另一个按钮为好，如果幻灯片自动加载照片，您无法在1秒内点击任何其他照片加载任何其他照片。

Answer 1

我会为CSS类添加一个标志，按钮：

工作小提琴：http://jsfiddle.net/b_m_h/Jtec5/86/

的标志是一个.enable css类，只有li与.enable是点击。

该事件仅监听click上ul li.enable：

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

起初，所有的按钮必须可以点击，所以加.enable类所有li：

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

并添加机制来禁止

：之后在 traverseSlideShow() 1秒 li按钮并重新使能它

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

Answer 2

使用的setTimeout的功能中b是按钮的ID被推迟

function slow_button(b) { 

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

Answer 3

试试这个，

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