Having issue with accumulative event listeners for frame navigation.

Community Beginner ,
Aug 05, 2021 Aug 05, 2021

Copy link to clipboard

Copied

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.
TOPICS
Performance

Views

59

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Adobe Community Professional , Aug 05, 2021 Aug 05, 2021
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 r
...

Likes

Translate

Translate
Adobe Community Professional ,
Aug 05, 2021 Aug 05, 2021

Copy link to clipboard

Copied



 

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

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Aug 05, 2021 Aug 05, 2021

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Aug 05, 2021 Aug 05, 2021

Copy link to clipboard

Copied

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

 

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

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Aug 05, 2021 Aug 05, 2021

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Aug 05, 2021 Aug 05, 2021

Copy link to clipboard

Copied

LATEST

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines