Jquery - nút slideshow mã chức năng

Question

Tôi có chiếu rất đơn giản này ở đây: fiddle
mã 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); 
}); 

Như bạn có thể thấy có ba nút, trên nhấn bất kỳ nút trình chiếu tự động đi vào hình ảnh liên quan với nút bạn nhấp và bạn có thể thấy kiểu nút này thay đổi (khi nhấp và sau khi vượt qua 3 giây).
Tôi có một vấn đề với mã này mà tôi đang cố khắc phục.
Vâng, tôi đang cố gắng ngăn chặn nhấp vào bất kỳ nút nào trong một giây sau khi bất kỳ nút nào được thay đổi, đơn giản, nếu bạn nhấp vào bất kỳ nút nào, bạn cũng không thể nhấp vào nút khác trong vòng 1 giây, và. tự động tải ảnh mà bạn không thể tải bất kỳ ảnh nào khác bằng cách nhấp vào bất kỳ nút nào khác trong vòng 1 giây.

Answer 1

tôi sẽ thêm một lá cờ như lớp css vào nút: http://jsfiddle.net/b_m_h/Jtec5/86/

:

fiddle Làm việc

Cờ là một lớp học .enable css, chỉ li với .enable là có thể nhấp.

Sự kiện này chỉ lắng nghe cho click trên ul li.enable:

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

Lúc đầu, tất cả các nút sẽ có thể nhấp, vì vậy thêm .enable lớp cho tất cả li:

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

Và thêm cơ chế để vô hiệu hóa nút li và bật lại sau 1 giây trong traverseSlideShow():

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

Answer 2

setTimeout

sử dụng trong một hàm trong đó b là id của các nút bị trì hoãn

function slow_button(b) { 

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

Answer 3

thử này,

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