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

别等时光非礼了梦想. 提交于 2019-12-13 18:14:46

问题


I need to prevent link from being clicked for let's say 2 seconds.

Here is an example http://jsbin.com/orinib/4/edit

When you look at the rendered mode you see next and prev links. When you click next, it slides with a nice transition. However if you click multiple times there is no transition sort of, which is expected. But my question: is this how can I prevent clicking on the next link, for about 2 seconds (or what ever time it takes for transition to happen) so that no matter what transition will occur. This is what I tried to use, but did not work:

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

}

Which I got from here "Disable" a link temporarily when clicked? I think. I believe that i cannot achieve this effect with this code (although it works on other links). I believe this is due to the fact that cycle-plugin got a hold of that link, and I understand that I have to bind/tap-into this functionality of the plugin. Please note: that this code may not work I just used it to show that I tried it and it did not work, you can reuse it if you have to or give me your own stuff.

Please help, if you can.

EDIT: As mrtsherman proposed this simple yet elegant ANSWER: http://jsfiddle.net/LCWLb.


回答1:


Take a look at the cycle options page. There are a number of ways to do this. I would consider using the pager event onPrevNextEvent. You can assign a callback function.

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



回答2:


The following will temporarily prevent clicks while a slideshow is running, 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; 
        });
    } 
});


来源:https://stackoverflow.com/questions/8001490/disable-a-next-previous-buttonlink-temporarily-when-clicked-in-jquery-cycle-pl

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!