Jquery - Tasti per presentazioni codice funzione

Question

ho questo molto semplice presentazione qui: fiddle
codici 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); 
}); 

Come potete vedere ci sono tre pulsanti, facendo clic su un pulsante della presentazione passa automaticamente alla foto correlata con il pulsante si fa clic e si può vedere lo stile di questo pulsante cambia (al clic e dopo aver superato 3 secondi).
Ho un problema con questo codice che sto cercando di risolvere.
Beh, sto cercando di evitare di fare clic su qualsiasi pulsante per un secondo dopo che lo stile di qualsiasi pulsante è cambiato, semplice, se si fa clic su qualsiasi pulsante non è possibile fare nuovamente clic su un altro pulsante entro 1 secondo, e, se lo slideshow carica automaticamente una foto non è possibile caricare altre foto facendo clic su un altro pulsante entro 1 secondo.

Answer 1

vorrei aggiungere una bandiera come classe CSS al pulsante: http://jsfiddle.net/b_m_h/Jtec5/86/

:

violino di lavoro

La flag è una classe css .enable, solo li con .enable è selezionabile.

L'evento ascolta solo per click su ul li.enable:

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

In un primo momento, tutto il tasto dovrebbe essere cliccabile, in modo da aggiungere .enable classe per tutti li:

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

E aggiungere il meccanismo per disabilitare il pulsante li e riattivalo dopo 1 secondo nello traverseSlideShow():

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

Answer 2

uso setTimeout in una funzione dove b è l'id del pulsante essere ritardato

function slow_button(b) { 

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

Answer 3

provare questo,

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