アニメーションHTML5キャンバス - イベントリスナーが複数回発射しますか？

Question

私はJavaScript（および一般的なコーディング）を信じられないほど新しくしています。アニメCCでは信じられないほど基本的なHTML5キャンバスを作っています。問題は、前のフレームに戻ったときにボタンが繰り返されることです。

流れ：

1. フレーム1 - コンソールメッセージボタン&次のフレームボタン
2. フレーム2 - 前のフレームボタン

二回、戻って前のフレームにボタンの火を動かします（つまり、コンソールログメッセージが2回発生します）。プロセスを繰り返して次のフレームに移動し、3回目に戻ると、3回発射されます。

私はこのポストすでに気づいている：Why are my event listeners firing more than once?

これは私が午前と全く同じ問題があります。しかし残念ながら、この答えはas3のためであり、私はjavascriptのためにそれを変更する方法を知らない。私は今の日のための研究にしようとしているが、私は本当に理解していない:(

誰も私を助けてくださいすることができます。また、

ありがとう？これについて学ぶために正しい方向に私を指すことができます！

CODE：

フレーム1：

instance = this; 
instance.stop(); 
instance.messageBTN.on("click", messageTest); 
function messageTest(){ 
    console.log("Button Pressed") 

} 

instance.nextBTN.addEventListener("click", nextFrame); 
function nextFrame(){ 
instance.gotoAndStop(1); 
} 

フレーム2：

instance = this 
instance.backBTN.addEventListener("click", previousFrame); 
function previousFrame(){ 
    instance.gotoAndStop(0); 
} 

サンプル・ファイル：https://wetransfer.com/downloads/0eb9e342cc093fff59645626b9e2fd1e20170308205102/3bafa6

Answer 1

変数を作成します。私はこの問題を解決するために管理

if (!eventLisBool) { 
// code... 
// and at the end of your listener code, include this: 
eventLisBool = true; 
} 

Answer 2

：

var eventLisBool = false; 

を使用してリスナーの中にあなたのコードを囲み！

AS3投稿でイベントリスナーを削除するように提案されましたが、JS同等のものがわかりませんでしたが、今は知っています！

instance.stop(); 
//MAKE SURE ALL BUTTONS ARE EVENT LISTENERS 
instance.messageBTN.addEventListener("click", messageTest); 
function messageTest(){ 
    console.log("Button Pressed"); 
} 

instance.nextBTN.addEventListener("click", nextFrame); 
function nextFrame(){ 
instance.gotoAndStop(1); 
//ADD IN TO REMOVE THE EVENT LISTENER WHEN MOVING TO ANOTHER FRAME 
instance.messageBTN.removeEventListener("click", messageTest); 
}