当点击jQuery循环插件时,暂时禁用下一个/上一个按钮(链接)(不一定是jQuery循环问题)

Disable a next/previous button(link) temporarily when clicked in jQuery Cycle plugin (not necessarily a jquery cycle issue)

本文关键字:循环 jQuery 上一个 按钮 链接 不一定 问题 插件 下一个      更新时间:2023-09-26

我需要防止链接在2秒内被点击

下面是一个例子http://jsbin.com/orinib/4/edit

查看呈现模式时,可以看到next和prev链接。当您单击next时,它会以一个漂亮的过渡滑动。然而,如果你点击多次,没有过渡类型,这是预期的。但我的问题是:这是我如何防止点击下一个链接,大约2秒(或任何时间的过渡发生),所以无论什么过渡将发生。这是我尝试使用的,但没有工作:

function(){
var thePreventer = false;
$("#next").bind($(this),function(e){
    if(!thePreventer){
        thePreventer = true;
        setTimeout(function(){
            thePreventer = false;
        }, 2000);
    }else{
        e.preventDefault();
    }
});

}

我从这里得到的"禁用"点击时暂时链接?我认为。我相信我不能用这个代码实现这个效果(尽管它在其他链接上工作)。我相信这是由于cycle-plugin获得了链接,我明白我必须绑定/利用插件的这个功能。请注意:这段代码可能不工作,我只是用它来表明我试过了,它没有工作,你可以重用它,如果你必须或给我你自己的东西。

请帮忙,如果你可以。

编辑:正如mrtsherman提出的这个简单而优雅的答案: http://jsfiddle.net/LCWLb.

查看循环选项页面。有很多方法可以做到这一点。我会考虑使用寻呼机事件onPrevNextEvent。您可以指定一个回调函数

$('#slideshow').cycle({ 
    pager:  '#nav', 
    onPrevNextEvent: function(isNext, zeroBasedSlideIndex, slideElement)  { 
        //disable controls
    },
    after: function(currSlideElement, nextSlideElement, options, forwardFlag) {
        //reenable controls
    }
});

当幻灯片正在运行时,以下设置将暂时阻止点击,如下图所示:

$.fn.extend({
    delayClick: function(callback) {
        this.bind('click', function(e) {
            $self = $(this);
            if( $self.hasClass('disabled') ) {
               $('#log').append('<p>click prevented on '+$self.attr('id')+'</p>');
            } 
            else {
               $self.addClass('disabled');
               callback.call(this, [arguments]);
               setTimeout(function() {
                   $self.removeClass('disabled');
               }, 1000);
            }
            return false; 
        });
    } 
});