JavaScript僅在顯示元素時才允許單擊

Question

我正在開發一個純粹的JavaScript游戲，我有一架能發射導彈的飛機，所以我的想法是，當我單擊它時，它會發射導彈，幾秒鍾后，導彈回到其位置並再次顯示其工作正常，但是當我單擊多次它是堆棧，所以發生了什么，有很多點擊，導彈沒有回到它的位置，我該如何解決呢？ 例如，如何在3秒內僅允許一次單擊？ 或僅在導彈准備就緒時才允許單擊！ 這是我的代碼！

 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

要解決您面臨的問題，您需要存儲一個狀態allowNextClick ，根據該狀態您可以決定是否執行其他代碼。

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

一種簡單的方法是使用變量存儲單擊的最后一次時間，然后檢查經過的時間。 在我的示例中，我使用lastTime來存儲時間，並且在兩次點擊之間實現了3000ms （3秒）的間隔。 此示例的輸出是簡單地記錄到控制台，但是您可以將其更改為所需的內容。

 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);
    }
}