addEventListenerが正しく機能していない

Question

私は、うまく動作するEventListenerを持つdivを持っています。しかし、EventListenerを特定のポイントでのみトリガする必要があります。そのため、ifステートメントを追加しました。

私のコードが以下のように関数からグローバル変数を変更できるという印象を受けましたが、これはまったく動作しないようです。私はwindow.clickDisable = false;の方法で関数内の変数を変更しようとしましたが、どちらも動作しません。コードの関連部分は以下の通りですが、なぜこれが機能していないのか誰かが知っていますか？ありがとう。

var clickDisable = true; 

if (clickDisable == false) { 
    document.getElementById("fight") 
    var fightMenu = fight.addEventListener("click", fightMenuFunction) 
} 

function fightMenuFunction() { 

} 

setTimeout(introAnimation, 7000) 
    function introAnimation() { 
    clickDisable = false; 
} 

Answer 1

あなたのコードで問題のほんの一握りがあります 私は最善のアプローチは、関数の本体内で、あなたのif文を置くことだと思います。タイマーが経過した場合にのみバインドされるイベントではなく、タイマーが経過した場合にのみ、関数本体が実行されるようにします。

また、document.getElementByIdが使用されていませんでした。代わりに、要素のidが自動的にグローバル変数として解釈されるという事実から利益を得ることができました。私は以下のようにこれを行うことができますが、おそらくベストプラクティスではありません。

var clickDisable = true; 
 

 
function fightMenuFunction() { 
 
    if(!clickDisable){ 
 
    console.log('This is the function running.') 
 
    } 
 
} 
 
fight.addEventListener("click", fightMenuFunction) 
 

 

 
window.setTimeout(introAnimation, 7000) 
 
    function introAnimation() { 
 
    clickDisable = false; 
 
}

<button id="fight">Fight</button>