удалить тикер для отдельного объекта в createjs

Question

Я хочу удалить слушателя для отдельных объектов, которые анимируются. Я хочу удалить тикер для отдельных объектов, потому что они будут останавливаться в разное время, когда они достигают 200 пикселей в y. Этот код является одним фреймом в Adobe Animate. Так что этот код не работает:

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

Так что этот код просто игнорируется: part.removeEventListener ("тик", animateParticle.bind (что));

Answer 1

Вы должны передать ссылку на тот же метод в removeEventListener, который вы использовали с addEventListener. Когда вы используете bind, он каждый раз генерирует функцию-обертку.

// This won't work. 
part.removeEventListener("tick", animateParticle.bind(that)); 

Простым обходным путем является сохранение ссылки на связанную функцию и использование этого.

aParticle.tickHandler = animateParticle.bind(that); 
aParticle.addEventListener("tick", aParticle.tickHandler); 

Затем используйте его при удалении слушателя

part.removeEventListener("tick", part.tickHandler); 

Существует лучший способ справиться с этим, хотя. Если вы используете утилиту on() вместо addEventListener, вы можете легко удалить метод внутри обработчика.

aParticle.on("tick", animateParticle, that); 

// Then when removing: 
function animateParticle(event) { 
    if (conditions) { 
     event.remove(); 
    } 
} 

---

Метод on() также имеет параметр scope, так что вы можете пропустить связывание функции. Важно отметить, однако, что метод on() выполняет свою собственную внутреннюю привязку, поэтому, чтобы удалить слушателя обычным способом, вы также должны сохранить ссылку на него.

var listener = target.on("tick", handler, this); 
listener.off("tick", listener); 

Надеюсь, что это поможет!