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不接受对元素的任何新的点击，直到它运行所有这个函数？

来源

2009-09-04 Tristan Brotherton

这些都很好，有没有人明白它为什么这样做？（似乎失去了一个元素）？ – 2009-09-04 02:10:05

也许像

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 01:53:31 MiffTheFox

不错。也可以解除点击，然后在过程完成后重新绑定。 – 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。

来源

2009-09-04 01:52:58

您可以使用一个标志，表明它正在滚动（由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; 
    }); 
});

免责声明：我没有检查你的代码，看看它有多有效，我只是为你添加了标志和回调。

来源

2009-09-04 03:45:27 Prestaul

使用绑定和解除绑定删除使用标志变量=）

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 03:52:25 mauris

jQuery的。点击功能 - 防止它被再次调用，直到函数完成

回答

相关问题