createjs에서 개별 오브젝트의 티커 제거

Question

애니메이트하는 개별 오브젝트에 대한 리스너를 제거하려고합니다. 개별 개체의 시세표는 y에서 200 픽셀에 도달하면 다른 시간에 중단되기 때문에 제거하고 싶습니다. 이 코드는 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

addEventListener과 같이 사용한 removeEventListener의 동일한 방법에 대한 참조를 전달해야합니다. bind을 사용하면 매번 래퍼 함수가 생성됩니다.

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

간단한 해결 방법은 바운드 함수에 대한 참조를 저장하고 사용하는 것입니다. 청취자

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

이 생각을 처리하는 더 좋은 방법이 있습니다를 제거 할 때

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

그런 다음 그것을 사용할 수 있습니다. addEventListener 대신 on() 유틸리티를 사용하면 처리기에서 메서드를 쉽게 제거 할 수 있습니다. 당신은 기능이 결합 건너 뛸 수 있도록

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

희망 하시겠습니까?