Problem with EventListener 'tick'

[phils40422687]

I am trying to move an object (a movie clip called "m_bubble") across the screen using the EventListener tick. I need to turn on and turn off the movement so I have 'nested' the tick code inside a click EventListener (controlled by "b_button"):

var instructioncount = 0;
this.b_button.addEventListener("click", ct1.bind(this));
function ct1()
{
instructioncount += 1;
stage.addEventListener("tick", moveIt.bind(this));
function moveIt()
{
if(instructioncount == 2){this.m_bubble.x -= 1;}
if(instructioncount == 3){this.m_bubble.x -= 1;}
if(instructioncount == 4){this.m_bubble.x -= 1;}
if(instructioncount == 5){this.m_bubble.x -= 1;}
if(instructioncount == 6){stage.removeEventListener("tick", moveIt.bind(this));}
}
}

So it works, but here's the problem. When I click the button more than once the bubbles move faster and it doesn't appear predictable, even though the parameters are the same. As I recall, the good old 'enter_frame" in ActionScript didn't do this.

   Why does Flash have to die - couldn't they just leave it for the educators in this world?

[ClayUUID]

Of couse it's moving faster, because you're adding another instance of the event listener every time you click the button. Don't do that.

Also, your removeEventListener() code doesn't work, because it requires passing in the SAME event handler function, but bind() creates a new function wrapper every time it's called. You probably just think it's working because it stops doing anything once instructionCount passes 6. If you want to remove an event listener from inside its handler function, just use the remove() method of the event object.

https://www.createjs.com/docs/easeljs/classes/Event.html#method_remove

Okay,  I've attempted to rewrite your code in a more sensible manner, but it's not at all clear what you're trying to do, so caveat emptor. For example, I couldn't figure out if it was intentional behavior that you can keep adding the ticker listener after the count has already exceeded 6.

this.stop();
var _this = this;
var instructionCount = 0;

this.b_button.addEventListener("click", ct1);

function ct1() {
	instructionCount++;
	if (!stage.hasEventListener("tick")) {
		stage.addEventListener("tick", moveIt);
	}
}

function moveIt(evt) {
	if (instructionCount >= 2 && instructionCount <=5) {
		_this.m_bubble.x--;
	}
	else if (instructionCount == 6) {
		evt.remove();
	}
}