使用幻灯片库（jquery）单击太快答案

【问题标题】：Clicking too fast with slide gallery (jquery)使用幻灯片库（jquery）单击太快
【发布时间】：2012-02-11 19:36:30
【问题描述】：

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




});

我为我制作的简单幻灯片库编写的这段代码。一切正常，除非我快速单击箭头按钮。它将超出我设置的值（urechts 和 ulinks）。

我尝试将“stop()”放在 .animate 之前，但没有帮助。希望大家能给我一些建议如何解决这个问题。提前致谢！

【问题讨论】：

标签： jquery queue slideshow

【解决方案1】：

尝试使用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');
    }   
}); 

});

【讨论】：

【解决方案2】：

尝试在您的点击函数中添加bool，以确定它是否已经处于过渡模式。

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




});

这样您的用户必须等待转换完成才能再次点击。

【讨论】：

没有问题 :) eZakto 的解决方案也很有效。 +1 总是很好！
试过了，但我的声誉太低了:)

【解决方案3】：

添加一些条件怎么样，像这样：

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

这样的事情会在幻灯片动画时使事件无效..

【讨论】：

试过了，但我的声誉太低了:)