JavaScript allow clicking only when the element is shown

Question

I am working on a pure JavaScript game I have a plane that shoots missiles so the idea is when i click it shoots a missile and after a few seconds the missile is back to its position and displayed again its working fine but when i click multiple times it is stack so what is happening is there are many clicks in which the missile is not back to it's position how can i solve this ?? how can i allow only one click for example in a period on 3 seconds ? or allow clicking only when the missile is ready !!! here is my code !

 window.onclick = function()
{

    var $ball1 = document.getElementById("ball1");

    // shooting the missile using css transition to get some delay
    $ball1.style.top = "-12000px";

    // hide missile and get it back to it's position
    setTimeout(function(){
        $ball1.style = "display:none; top:71px";
    }, 500); 

    // show missile again on plane
    setTimeout(function(){
        $ball1.style = "display:block;";
    }, 1000);      

}

Answer 1

To solve the issue you're facing you need to store a state allowNextClick , based on which you'll decide whether to execute the further code or not.

var allowNextClick = true;

window.onclick = function()
{

    if(!allowNextClick) {
        return;
    }
    allowNextClick = false;

    // allow every 3 seconds
    setTimeout(function() {
        allowNextClick = true;
    }, 3000);

    var $ball1 = document.getElementById("ball1");

    // shooting the missile using css transition to get some delay
    $ball1.style.top = "-12000px";

    // hide missile and get it back to it's position
    setTimeout(function(){
        $ball1.style = "display:none; top:71px";
    }, 500); 

    // show missile again on plane
    setTimeout(function(){
        $ball1.style = "display:block;";

        // allow next click after missile is back
        allowNextClick = true;
    }, 1000);      

}

Answer 2

A simple way would be to use a variable to store the last time when a click was handled, then check for the time that has passed. In my example, I use lastTime to store the time and I implement a gap of 3000ms (3 seconds) between clicks. The output of this example is simple logging to the console, but you can change it to whatever you wish.

 var lastTime = -1; window.onclick = function() { if (lastTime < 0 || (new Date().getTime() - lastTime >= 3000)) { lastTime = new Date().getTime(); console.log("firing missile"); } else { console.log("too soon"); } } 

Answer 3

// define a Boolean to check if ball is just shoot
var canShot = true;

window.onclick = function() {

    if (canShoot) {
        var $ball1 = document.getElementById("ball1");

        // shooting the missile using css transition to get some delay
        $ball1.style.top = "-12000px";

        // turn the Boolean canShot to false to prevent multiple trigger
        canShot = false;

        // hide missile and get it back to it's position
        setTimeout(function(){

            $ball1.style = "display:none; top:71px";
        }, 500); 

        // show missile again on plane
        setTimeout(function(){

            $ball1.style = "display:block;";
            // turn the Boolean canShot to true to make the ball can be shoot
            canShot = true;
       }, 1000);
    }
}