动画HTML5画布 - 事件监听器不止一次触发？ [英] Animate HTML5 Canvas - Event Listeners firing more than once?

问题描述

所以我对javascript（以及一般的编码）非常陌生，我已经设法在Animate CC中制作了一个令人难以置信的基本HTML5画布。唯一的问题是，当我回到前一帧时，按钮会重复。

So I am incredibly new to javascript (and coding in general), and I have managed to make an incredibly basic HTML5 canvas in Animate CC. Only problem is, when I move back to the previous frame the buttons repeat themselves.

流程：

1. 第1帧 - 控制台消息按钮&下一帧按钮


2. 第2帧 - 上一帧按钮

当回到上一帧时，按钮触发两次（即控制台日志消息触发两次）。如果我重复这个过程并移动到下一帧并再次返回第三次，它将触发三次。

When moving back to the previous frame, the buttons fire twice (i.e. the console log message fires twice). If I repeat the process and move to the next frame and back again for a third time, it will fire three times.

我已经注意到这篇文章：

I have noticed this post already: Why are my event listeners firing more than once?

这与我遇到的问题完全相同。但不幸的是，这个答案是针对as3而我不知道如何为javascript更改它。我现在一直在努力研究，但我真的不明白：（

This is the exact same problem as I am having. But unfortunately this answer is for as3 and I don't know how to change it for javascript. I have been trying to research for days now, but I really don't understand :(

任何人都可以帮助我，或者你可以指出我正确的方向学习关于这个？

Can anyone help me please or can you point me in the right direction to learn about this?

谢谢！

代码：

第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

推荐答案

创建一个变量：

var eventLisBool = false;

在监听器中使用以下代码包围您的代码：

Surround your code within the listener with:

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

这篇关于动画HTML5画布 - 事件监听器不止一次触发？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！