How to wait till click inside function?

Question

I'm in process of some beginner coding on Javascript/jQuery and stuck with a problem. Long story short:

1. I have one element on page which should ignore any clicks;
2. Once specific function called it should wait until n clicks;
3. Function should execute then some code;
4. After all is done element should ignore clicks again.

I tried to play around with setInterval() / clearInterval() but did not succeed.

Please help me :)

P.S.: one way is to reload a page with the new code but it is not for my case.

UPD:

var select = function() {
    /*once called this function should enable clicks on <td>
    toggling its class to yellow and once both cells are yellow
    clicking should be disabled*/
};

$(document).ready(function(){
    $("button[name=start]").click(function(){
        select();
    });
}); 

http://jsfiddle.net/superiorbanana/Z53EU/. Hope this small bit of code will clarify the idea.

Answer 1

I think you're looking for jQuery's on and off methods.

Bind a click handler with on, and then turn it off when you're done with it. So, in your case, you can turn a click handler off immediately after it's been triggered. For example:

$(document).ready(function () {
    var $tds = $('td'), // store td's
        count = $tds.length; // store # of td's
    $("button[name=start]").on('click', function (e) {
        // pass `e` so that it can be used to turn itself off
        $(this).off(e); // this function won't execute again

        // bind td clicking after button's clicked
        $tds.on('click', function (e) {
            $(this).addClass('clicked').off(e); // executed once per td

            // the if statement and the count is actually 
            // not necessary; it's just to demonstrate 
            // that all the click handlers have ended.

            count--; // count - 1                
            if (count === 0) {
                console.log('there are no more click handlers');
            }
        });
    });
});

Or simply

$(document).ready(function () {
    $("button[name=start]").on('click', function (e) {
        $(this).off(e);
        $('td').on('click', function (e) {
            $(this).addClass('clicked').off(e);
        });
    });
});

Check out the code on your jsfiddle.

Answer 2

Just store the number of clicks in a variable and check it with javascript. Something like this:

var x = 0;

$('#button').click(function(){
   x++;
    if (x == 5) {
        alert("hello");
    }
});

fiddle

Answer 3

I'm not sure whether you are looking for this,

HTML

<span class="one">click disabled</span>
<br/>
<span class="two">enable click</span>

jquery

var count=0;
$(".two").click(function(){
    $(".one").text("click enabled");
    $(".one").click(function(){
        count++;
        if(count==5)
        {
            $(".one").text("click disabled");
            $(".one").off("click");

        }
    alert("click enabled");
    });

});

Fiddle demo

In the above code, click event of first span will not fire until the second span is clicked. Click event for first span is binded only after clicking the second span. There is also a counter for click. When the counter reaches the limit click event of first span will be removed using off()

Answer 4

You should set the event listener at the beginning to listen for any click event on that element.

Once specific function called it should wait until n clicks;

That "specific function" can set a variable to "true" that was previously false. This is what the click event listener is waiting for. Once the variable is true, a counter variable can count the number of clicks

n clicks;

Once the counter reaches the desired number of clicks you can execute whatever you desire:

if(counter === n) {
    executeMe();
    counter = 0;
}

You can use "mod" too, if the interval is always the same.