Animate HTML5 Canvas - 事件监听器触发不止一次？答案

【问题标题】：Animate HTML5 Canvas - Event Listeners firing more than once?Animate HTML5 Canvas - 事件监听器触发不止一次？
【发布时间】：2017-03-08 20:42:57
【问题描述】：

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

流程：

第 1 帧 - 控制台消息按钮和下一帧按钮
第 2 帧 - 上一帧按钮

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

我已经注意到这个帖子了：Why are my event listeners firing more than once?

这与我遇到的问题完全相同。但不幸的是，这个答案适用于 as3，我不知道如何为 javascript 更改它。我这几天一直在研究，但我真的不明白:(

谁能帮助我，或者你能指出我正确的方向来了解这个吗？

谢谢！

代码：

第一帧：

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

【问题讨论】：

需要查看一些代码才能知道你哪里出错了
请编辑您的问题以包含您的代码，而不是将其添加为评论。这使得它更容易阅读:)
天哪，你能说出我对这件事有多陌生——对这一切感到抱歉。按要求编辑并附上文件:)
@Cowen 你能重新附加文件以便永远访问它们吗？

标签： javascript jquery html canvas

【解决方案1】：

我设法解决了这个问题！

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

【讨论】：

【解决方案2】：

创建一个变量：

var eventLisBool = false;

在侦听器中环绕您的代码：

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

【讨论】：

不幸的是，这不起作用:(请问，代码试图做什么？
@Cowen 正在检查事件是否触发了多次，如果有，则忽略事件监听器的第二次触发
@Cowen 哎呀！我发现了我的错误。设置变量时放上var，并确保变量是在事件监听器之外设置的

【解决方案3】：

在 HTML5 Canvas 中，没有像 Flash 中那样的 nextFrame() 或 PrevFrame()。您只需要创建一个变量并增加每次点击的次数：

this.stop()
var _this = this;
    var frame = new Number(0);

    _this.next_btn.on('click', function(){
    /*
    Can be used on the main timeline or on movie clip timelines.
    */
    frame++;
    _this.myMovieClip_mc.mySubMovie_mc.gotoAndStop(frame);

    });

    _this.prev_btn.on('click', function(){
    /*
    Can be used on the main timeline or on movie clip timelines.
    */
    frame--;
    _this.myMovieClip_mc.mySubMovie_mc.gotoAndStop(frame);

    });

但你必须设置任何逻辑条件来控制你的变量或函数，否则它将减少/增加有限的帧数

【讨论】：