jQuery的。点击功能 - 防止它被再次调用,直到函数完成
我已经写了我正确的jQuery的第一位的图像幻灯片,它允许用户通过一些图片上下滚动:jQuery的。点击功能 - 防止它被再次调用,直到函数完成
$(window).load(function(){
$('.scrollUp').click(function(){
$('.cardWrapper:visible:first').prevAll(':hidden:first').slideDown(function(){
$('.cardWrapper:visible:last').slideUp();
});
return false;
});
$('.scrollDown').click(function(){
if($('.cardWrapper:last').is(':hidden')){
$('.cardWrapper:visible:last').nextAll(':hidden:first').slideDown();
$('.cardWrapper:visible:first').slideUp();
}
else{
$('.cardWrapper:last').after('<div class="cardWrapper"></div>');
$('.cardWrapper:last').load('/followedTestSingle/?sequence={{gr.sequence_token}}', function(){
$('.cardWrapper:visible:first').slideUp();
});
}
return false;
});
});
我遇到的问题是,如果单击.scrollDown元素链接上的速度非常快 - 它会丢失所有内容,因为它没有时间添加额外的内容(我认为) - 因此它开始失败。
有没有办法让jQuery不接受对元素的任何新的点击,直到它运行所有这个函数?
也许像
var scrollDownClickActive = false;
$('.scrollDown').click(function(){
if (scrollDownClickActive) return false;
scrollDownClickActive = true;
if($('.cardWrapper:last').is(':hidden')){
$('.cardWrapper:visible:last').nextAll(':hidden:first').slideDown();
$('.cardWrapper:visible:first').slideUp(200, function(){ scrollDownClickActive = false; });
}
else
{
$('.cardWrapper:last').after('<div class="cardWrapper"></div>');
$('.cardWrapper:last').load('/followedTestSingle/?sequence={{gr.sequence_token}}', function(){
$('.cardWrapper:visible:first').slideUp(200, function(){ scrollDownClickActive = false; });
});
}
return false;
});
使用标志来确定是否该功能被激活与否。
不错。也可以解除点击,然后在过程完成后重新绑定。 – 2009-09-04 02:03:48
因为slideUp/slideDown异步发生,所以不起作用。即scrollDownClickActive = false在幻灯片结束之前发生。 – Prestaul 2009-09-04 03:31:21
@Prestaul - 通过使用slideUp回调参数解决了这个问题。 – MiffTheFox 2009-09-04 04:03:30
如果它是单击一个按钮元素,只是让你的函数禁用它,并在完成回调函数中重新启用它。
否则,只需编写函数来检查阻止其运行的变量值。如果该变量未设置,请在处理程序中设置该值(类似var busy = true;
),并在完成回调中将其设置回false
。
您可以使用一个标志,表明它正在滚动(由MiffTheFox的建议),但你必须取消设置标志幻灯片回调,因为幻灯片异步发生:
$(function(){
var scrolling = false;
function startScrolling() {
if(scrolling) return false;
return scrolling = true;
}
function scrollComplete() {
scrolling = false;
}
$('.scrollUp').click(function() {
if(startScrolling()) return false;
$('.cardWrapper:visible:first')
.prevAll(':hidden:first').slideDown(function() {
$('.cardWrapper:visible:last').slideUp(scrollComplete);
});
return false;
});
$('.scrollDown').click(function() {
if(startScrolling()) return false;
if($('.cardWrapper:last').is(':hidden')) {
$('.cardWrapper:visible:last').nextAll(':hidden:first').slideDown();
$('.cardWrapper:visible:first').slideUp(scrollComplete);
} else {
$('.cardWrapper:last').after('<div class="cardWrapper"></div>');
$('.cardWrapper:last').load('/followedTestSingle/?sequence={{gr.sequence_token}}', function() {
$('.cardWrapper:visible:first').slideUp(scrollComplete);
});
}
return false;
});
});
免责声明:我没有检查你的代码,看看它有多有效,我只是为你添加了标志和回调。
使用绑定和解除绑定删除使用标志变量=)
function scroller(obj){
$(obj).unbind('click');
if($('.cardWrapper:last').is(':hidden')){
$('.cardWrapper:visible:last').nextAll(':hidden:first').slideDown();
$('.cardWrapper:visible:first').slideUp();
scrollDownClickActive = false;
}
else
{
$('.cardWrapper:last').after('<div class="cardWrapper"></div>');
$('.cardWrapper:last').load('/followedTestSingle/?sequence={{gr.sequence_token}}', function(){
$('.cardWrapper:visible:first').slideUp();
scrollDownClickActive = false;
});
}
$(obj).click(function(){scroller(this);});
}
$('.scrollDown').click(function(){
scroller(this);
});
希望这有助于!
这些都很好,有没有人明白它为什么这样做? (似乎失去了一个元素)? – 2009-09-04 02:10:05