remove ticker for individual object in createjs - jquery-animate

Question

I want to remove the listener for individual objects that are animating. I want to remove the ticker for individual objects because they will stop at different times when they reach 200px in y. This code is one frame in Adobe Animate. So this code is not working:
this.stop();
that= this;
var aParticle;
var mySpeed = 12;
var myRotation = 4;
var totalParticles = 5;
var stopParticles = false;
var particleHolder = new createjs.Container();
var count = 0;
var collission_ar = [this.parent.mc_coll0, this.parent.mc_coll1, `this.parent.mc_coll2, this.parent.mc_coll3, this.parent.mc_coll4, this.parent.mc_coll5, this.parent.mc_coll6, this.parent.mc_coll7, this.parent.mc_coll8, this.parent.mc_coll9, this.parent.mc_coll10, this.parent.mc_coll11, this.parent.mc_coll12, this.parent.mc_coll13, this.parent.mc_coll14];`
var totalCollisions = collission_ar.length;
this.addChild(particleHolder);
//stage.update();
var xRange = width;
var yRange = height;
var scaleNum = 1;
//var collisionMethod = ndgmr.checkPixelCollision;
this.scaleX = 1;
this.scaleY = 1;
createParticles()
setTimeout(function(){
removeTimer();
}, 5000)
function createParticles(){
var particle_ar = [];
var randNum = Math.ceil(Math.random() * totalParticles);
aParticle = new lib['MC_leaf'+randNum]();
aParticle.name = 'MC_leaf'+count;
aParticle.x = Math.random() * xRange;
aParticle.y = -Math.random() * 15;
theNum = Math.random() * scaleNum;
aParticle.scaleX = theNum
aParticle.scaleY = theNum
aParticle.alpha = 1;
aParticle.collision = Math.floor(Math.random() * 2);
particleHolder.addChild(aParticle);
aParticle.addEventListener("tick", animateParticle.bind(that));
if(!stopParticles){
timer = setTimeout(function() { createParticles() }, 100);
}
count++;
}
function animateParticle (event){
var part = event.currentTarget;
event.currentTarget.y += mySpeed
event.currentTarget.x += Math.random()/10
event.currentTarget.rotation += myRotation;
if (part.y > 200) {
if(part.name == 'MC_leaf0') console.log('part0 y '+part.y);
part.removeEventListener("tick", animateParticle.bind(that));
}
}
function removeTimer() {
stopParticles = true;
timer = clearInterval();
}
var timer = setTimeout(function() { createParticles() }, 100, that);
So this code is just ignored:
part.removeEventListener("tick", animateParticle.bind(that));

Answer 1

You must pass a reference to the same method in removeEventListener that you used with addEventListener. When you use bind, it generates a wrapper function each time.
// This won't work.
part.removeEventListener("tick", animateParticle.bind(that));
A simple workaround is to store a reference to the bound function, and use that.
aParticle.tickHandler = animateParticle.bind(that);
aParticle.addEventListener("tick", aParticle.tickHandler);
Then use it when removing the listener
part.removeEventListener("tick", part.tickHandler);
There is a better way to handle this though. If you use the utility on() method instead of addEventListener, you can easily remove the method inside the handler.
aParticle.on("tick", animateParticle, that);
// Then when removing:
function animateParticle(event) {
if (conditions) {
event.remove();
}
}
The on() method also has a scope parameter, so you can skip the function binding. It is important to note though that the on() method does its own internal binding, so to remove a listener the usual way, you have to store a reference to it as well.
var listener = target.on("tick", handler, this);
listener.off("tick", listener);
Hope that helps!