Question

I have this function, and i animate via css a flipbox. How could i implement that the click functions is not queued, so that you cannot “spam” the flipbox?

$(document).ready(function () {
    function flipBack() {
        console.log($(this));
        var $this = $(this);
        $this.removeClass('flip');
        $this.children('.front').delay(600).show(0);
        $this.children('.back').delay(600).hide(0);
        return false;
    }

    function flipForward() {
        var $this = $(this);
        $this.addClass('flip');
        $this.children('.front').delay(600).hide(0);
        $this.children('.back').delay(600).show(0);
        var t = setTimeout(function () {
            $this.trigger("click");
        }, 5000);
    }
    $('.click').toggle(flipForward, flipBack);
});

Any ideas are appreciated! Thnx in advance!

Answer 1

I usually use a variable called clickban.

e.g:

$el.click(function(){
    if( !clickban ){
        clickban = true;
        // Do something, and then afterwards set clickban to false
        // and then you can click again.
    }
});

You should be able to apply that to your situation I think!

Hope that helps 🙂