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

मैं बटन के लिए सीएसएस वर्ग के रूप में एक झंडा जोड़ना होगा है:

कार्य बेला: http://jsfiddle.net/b_m_h/Jtec5/86/

ध्वज .enable सीएसएस वर्ग है, केवल li.enable के साथ क्लिक करने योग्य है।

घटना केवल सुनता के लिए clickul li.enable पर:

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

सबसे पहले, सभी बटन क्लिक करने योग्य होना चाहिए, इसलिए सभी li के लिए .enable वर्ग जोड़ें:

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

और निष्क्रिय करने के लिए तंत्र को जोड़ने li बटन और traverseSlideShow() में 1 सेकंड के बाद इसे फिर से सक्षम करें:

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

Answer 2

एक समारोह में

उपयोग setTimeout जहां ख बटन की आईडी में देरी हो करने के लिए

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