Animate HTML5 Canvas - Event Listeners firing more than once?

问题

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.

The flow:

Frame 1 - Console Message Button & Next Frame Button
Frame 2 - Previous Frame Button

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?

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?

Thank you!

CODE:

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

Frame 2:

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

EXAMPLE FILES: https://wetransfer.com/downloads/0eb9e342cc093fff59645626b9e2fd1e20170308205102/3bafa6

回答1:

I managed to solve this!

The AS3 post suggested to remove the event listeners, but I couldn't figure out what the JS equivalent was, but now I know!

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:

Make a variable:

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

回答3:

In HTML5 Canvas there is no nextFrame() or PrevFrame() like in Flash. You just need to create a variable and increase the number for each click:

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

    });

but you must put any logic condition to control your variable or functions otherwise it will decrease/increase limited frame number

来源：https://stackoverflow.com/questions/42681569/animate-html5-canvas-event-listeners-firing-more-than-once

标签

javascript

jquery

html5

canvas