Question

我想删除动画的单个对象的侦听器。我想删除单个对象的自动收报机，因为它们会在y达到200px时在不同时间停止。此代码是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（＆＃34; tick＆＃34;，animateParticle.bind（that））;

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

希望有所帮助！

删除createjs中单个对象的ticker

1 个答案: