在 jQuery Cycle 插件中单击时暂时禁用下一个/上一个按钮（链接）（不一定是 jquery 循环问题）答案

【问题标题】：Disable a next/previous button(link) temporarily when clicked in jQuery Cycle plugin (not necessarily a jquery cycle issue)在 jQuery Cycle 插件中单击时暂时禁用下一个/上一个按钮（链接）（不一定是 jquery 循环问题）
【发布时间】：2011-11-11 00:32:19
【问题描述】：

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

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

当您查看渲染模式时，您会看到下一个和上一个链接。当您单击下一步时，它会以漂亮的过渡方式滑动。但是，如果您多次单击，则没有过渡类型，这是预期的。但是我的问题是：这是我如何防止单击下一个链接大约 2 秒（或过渡发生所需的时间），以便无论发生什么过渡。这是我尝试使用的，但没有用：

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

}

我想是从 "Disable" a link temporarily when clicked? 那里得到的。我相信我无法使用此代码实现此效果（尽管它适用于其他链接）。我相信这是由于循环插件获得了该链接，并且我知道我必须绑定/点击插件的此功能。请注意：此代码可能不起作用我只是用它来表明我尝试过它并且它不起作用，如果需要，您可以重复使用它或给我自己的东西。

如果可以的话，请帮忙。

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

【问题讨论】：

我真的不明白循环插件如何适合这里；在这个例子中你没有任何与之相关的代码。
对不起，我想说这个（代码）是我尝试过的，但没有奏效。我用新的编辑修复了它。

标签： javascript jquery jquery-cycle

【解决方案1】：

看看cycle options page。有很多方法可以做到这一点。我会考虑在PrevNextEvent 上使用寻呼机事件。您可以分配一个回调函数。

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

【讨论】：

我实际上尝试了 onPrevNextEvent 和之后但无法使其工作，但我会再试一次，因为您似乎为我指明了正确的方向。
这是一个贫民窟模型 - 我只是使用事件隐藏控件。 jsbin.com/orinib/6/edit
哈哈哈，令人难以置信的是人们能提出什么样的意想不到的（开箱即用的）解决方案。我会毫不犹豫地研究这个解决方案。
我在 jsfiddle 工作时感觉更舒服 - jsfiddle.net/LCWLb。创建一个阻止元素，然后隐藏/显示它以防止点击链接。
是的，是的，天哪，是的！我将实施此解决方案并将您的答案标记为正确。对 jsbin 感到抱歉，我通常在我的问题中同时使用 jsbin 和 jsfiddle，以便人们对他们习惯的内容感到满意。

【解决方案2】：

以下内容将在幻灯片运行时暂时阻止点击，as shown in this fiddle：

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

【讨论】：