Question

我为图像幻灯片编写了第一部正确的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在运行所有这个函数之前不接受对元素的任何新点击？

Answer 1

也许像

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

使用标志来确定该功能是否有效。

Answer 2

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

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

希望这有帮助！

Answer 3

如果它正在点击一个按钮元素，只需让你的功能禁用它并在完成回调函数中重新启用它。

否则只需编写函数来检查变量值，以防止它运行。如果未设置变量，请在处理程序中设置值（类似var busy = true;）并在完成回调中将其设置回false。

Answer 4

您可以使用一个标志来指示它正在滚动（正如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;
    });
});

免责声明：我没有检查您的代码以查看它的有效性，我刚刚为您添加了标记和回调。

jQuery .click函数 - 防止在函数完成之前再次调用它

4 个答案: