Having issue with accumulative event listeners for frame navigation.

[renanmd]

Hey guys! I'm new and I'm having issues with my frame navigation.

My issue is that after a few times going back and forth using the navigation buttons I have created the behavior of the buttons start to become slow. The more I do it the longer it takes.

I read here that event listeners are accumulative and that I should remove the event listeners. I have tried this but when I remove the event listeners my buttons stop working.

This is the original code accumulating the events listeners.

this.btn_back.addEventListener("click", fl_ClickToGoToAndStopAtFrame);

function fl_ClickToGoToAndStopAtFrame()

{

root.gotoAndStop(0);

}

this.btn_next.addEventListener("click", fl_ClickToGoToAndStopAtFrame_2);

function fl_ClickToGoToAndStopAtFrame_2()

{

root.gotoAndStop(2);

}


My question is, where should I put the removeEventListeners? I have to use these buttons all over the project and it is not necessarally sequential navigation.

I really appreciate your help guys.

[kglad · Accepted solution]

var _this = this;

this.btn_back.addEventListener("click", fl_ClickToGoToAndStopAtFrame);

function fl_ClickToGoToAndStopAtFrame()

{

_this.btn_back.removeEventListener("click", fl_ClickToGoToAndStopAtFrame);

root.gotoAndStop(0);

}

this.btn_next.addEventListener("click", fl_ClickToGoToAndStopAtFrame_2);

function fl_ClickToGoToAndStopAtFrame_2()

{

_this.btn_next.removeEventListener("click", fl_ClickToGoToAndStopAtFrame_2);

root.gotoAndStop(2);

}


My question is, where should I put the removeEventListeners? I have to use these buttons all over the project and it is not necessarally sequential navigation.

I really appreciate your help guys.

By @renanmd

[renanmd]

I tried applying this but now the buttons don't work anymore. None of them.

var _this = this;

_this.stop();

_this.btn_next.addEventListener("click", fl_ClickToGoToAndStopAtFrame_2);

function fl_ClickToGoToAndStopAtFrame_2()

{

_this.removeEventListener("click", fl_ClickToGoToAndStopAtFrame);

_this.gotoAndStop(1);

}

[ClayUUID]

Why did you replace "root" with "_this"?

And why are you removing fl_ClickToGoToAndStopAtFrame inside the fl_ClickToGoToAndStopAtFrame_2 event handler?

[renanmd]

I used "_this" because it was in the code that kglad pasted. But "root" was from my code that I had forgottern to fix. Instead of "var _this = this", I had used "root = this". But if you look at the first code that I posted I had removed the var root declaration but kept it in the function.

I fixed the event handler name to the correct one and everything is working fine now. No accumulation or anything. Thank you guys! @ClayUUID @kglad 

This is my code now:

var _this = this;

_this.btn_back.addEventListener("click", fl_ClickToGoToAndStopAtFrame);

function fl_ClickToGoToAndStopAtFrame()

{

_this.btn_back.removeEventListener("click", fl_ClickToGoToAndStopAtFrame);

_this.gotoAndStop(0);

}

_this.btn_next.addEventListener("click", fl_ClickToGoToAndStopAtFrame_2);

function fl_ClickToGoToAndStopAtFrame_2()

{

_this.btn_next.removeEventListener("click", fl_ClickToGoToAndStopAtFrame_2);

_this.gotoAndStop(2);

}

[kglad]

you're welcome.

p.s.  more generally you can use:

if(!this.alreadyExecuted){

// do whatever that you want done exactly once no matter how often this frame is entered

this.alreadyExecuted = true;

}

in your situation:

if(!this.alreadyExecuted){

this.btn_back.addEventListener("click", fl_ClickToGoToAndStopAtFrame);

this.btn_next.addEventListener("click", fl_ClickToGoToAndStopAtFrame_2)

this.alreadyExecuted = true;

}

function fl_ClickToGoToAndStopAtFrame()

{

root.gotoAndStop(0);

}

function fl_ClickToGoToAndStopAtFrame_2()

{

root.gotoAndStop(2);

}