Question

I have some specify situation.

There is click action, after it i’m adding some class. At the first click i didn’t have this class and i want to do something from first condition, when i’m click fast second time in the middle of my 700ms interval at my button i need to do something else depend on class that i’v append before. So i do this:

btn.live('click', function(e){
    block.addClass('animation_time');
    setTimeout(function(){
        block.removeClass('animation_time')
    }, 700);
    if (!block.hasClass('animation_time')){
        // do something
    } else {
        setTimeout(function(){
            // do something
        }, 350);
    }
});

Behind this i have CSS animations, i need to allow one of them and before another start, so that’s way i’m adding this timeline condition. What is not right, when i need to check this element and appending class? Thx for help.

Answer 1

You need to cache setTimeout function result in purpose to have ability to clear timeout on second click:

<input id="btn" type="button" value="Click Me" />
<div class="block">Odio platea! Nec elementum massa elit augue mus ut. Sed tristique dolor,
    rhoncus aliquet urna? Parturient urna scelerisque, adipiscing amet montes
    eu a egestas in, odio est odio, platea nisi enim egestas ac. Scelerisque
    tempor augue scelerisque lectus porttitor! Augue?
</div>

var fastSndClickTimeout = null;
$("#btn").on("click", function () {
    if (fastSndClickTimeout != null) {
        clearTimeout(fastSndClickTimeout);
        fastSndClickTimeout = null;
        $(".block").css("background-color", "green");
    } else {
        fastSndClickTimeout = setTimeout(function () {
            $(".block").css("background-color", "red");
            fastSndClickTimeout = null;
        }, 700);
    }
});