Kliknięcie za szybko z galerii slajdów (jquery)

Question

$(document).ready(function(e) { 

$('span#pijlr').click(function(e) { 
    var slide = 500; 
    var variable = $('#gallcont').css('left'); 
    var urechts = "-1000px"; 
    if(variable > urechts) { 
    $('#gallcont').animate({'left': '-=' +slide+ 'px'},'fast','linear'); 
    } 
}); 

$('span#pijll').click(function(e) { 
    var slide = 500; 
    var variable = $('#gallcont').css('left'); 
    var ulinks = "0px"; 
    if(variable < ulinks) { 
    $('#gallcont').animate({'left': '+=' +slide+ 'px'},'fast','linear'); 
    } 
}); 




}); 

Ten kod napisałem dla prostej galerii slajdów zrobiłem. Wszystko działa dobrze, chyba że szybko kliknę przycisk strzałki. To wykracza poza wartości ustawione (urechts i ulinks).

Próbowałem wstawiania "stop()" przed .animate, ale to nie pomogło. Mam nadzieję, że możecie mi doradzić, jak rozwiązać ten problem. Z góry dziękuję!

Answer 1

Spróbuj oddanie bool w funkcji kliknij, aby określić, czy jest on już w stanie przejściowym.

var inClick = false; 

$(document).ready(function(e) { 

$('span#pijlr').click(function(e) { 
    if(inClick) return; 

    inClick = true; 

    var slide = 500; 
    var variable = $('#gallcont').css('left'); 
    var urechts = "-1000px"; 
    if(variable > urechts) { 
    $('#gallcont').animate({'left': '-=' +slide+ 'px'},'fast','linear', function() { inClick = false; }); 
    } 
    else inClick = false; 
}); 

$('span#pijll').click(function(e) { 
    if(inClick) return; 

    inClick = true; 

    var slide = 500; 
    var variable = $('#gallcont').css('left'); 
    var ulinks = "0px"; 
    if(variable < ulinks) { 
    $('#gallcont').animate({'left': '+=' +slide+ 'px'},'fast','linear', function() { inClick = false; }); 
    }  
    else inClick = false; 
}); 




}); 

W ten sposób użytkownik musi poczekać na zakończenie przejścia, aby ponownie kliknąć.

Answer 2

spróbuj stop(true,true)

$(document).ready(function(e) { 

$('span#pijlr').click(function(e) { 
    var slide = 500; 
    var variable = $('#gallcont').css('left'); 
    var urechts = "-1000px"; 
    if(variable > urechts) { 
    $('#gallcont').stop(true,true).animate({'left': '-=' +slide+ 'px'},'fast','linear'); 
    } 
}); 

$('span#pijll').click(function(e) { 
    var slide = 500; 
    var variable = $('#gallcont').css('left'); 
    var ulinks = "0px"; 
    if(variable < ulinks) { 
    $('#gallcont').stop(true,true).animate({'left': '+=' +slide+ 'px'},'fast','linear'); 
    } 
}); 

}); 

Answer 3

Co o dodanie niektórych warunkowe, tak:

$('span#pijlr').click(function(e) { 
    if (!$('#gallcont').is(':animated')) { 
     var slide = 500; 
     var variable = $('#gallcont').css('left'); 
     var urechts = "-1000px"; 
     if(variable > urechts) { 
     $('#gallcont').animate({'left': '-=' +slide+ 'px'},'fast','linear'); 
     } 
    } 
}); 

Coś takiego będzie unieważnić wydarzenie podczas gdy suwak jest animowanie ..