Question

我正在制作幻灯片库。它创建了一个过渡对象，负责转换每张幻灯片。

事情很有效，除了我无法在动画完成时从我的幻灯片中删除事件监听器。我已经将回调分配为我的基类Transition类的属性，我认为这将提供在动画完成时删除侦听器所需的引用：

function Transition(slide){
    this.el = slide;
    this.settings = {
     'inTransition': 'fade',
    'outTransition': 'fade',
    'transitionSpeed': 1000, //in ms
    'slideSpeed': 2000
        };
    this.duration = (this.settings['transitionSpeed'] / 1000) + 's';
    this.endAnimation = null;
}

//FADE TRANSITION
function FadeTransition(slide){
    Transition.call(this, slide);
}
FadeTransition.prototype = Object.create(Transition.prototype);
FadeTransition.prototype.constructor = FadeTransition;

FadeTransition.prototype.inRight = function(){

    var self = this;
    this.endAnimation = function(){
        DomUtil.removeClass(this.el, 'nd-fade-in-transition');
        his.el.removeEventListener( 'webkitAnimationEnd', this.endAnimation );
        console.log(new Date());

         //running the following in the console shows the number of listeners growing                
         //getEventListeners(this.slide.el).webkitAnimationEnd.length); //This keeps getting larger
    }

    this.el.style.webkitAnimationDuration = this.duration;

    this.el.addEventListener( 'webkitAnimationEnd', this.endAnimation.bind(this));
    DomUtil.addClass(this.el, 'nd-fade-in-transition');
}

所以，我希望每次动画完成时，都会删除侦听器，并且控制台会为每次传递记录一次当前日期。

然而，我所看到的是，听众被连接而没有被删除，所以我最终会有多个听众处理我的动画结束事件，所以我累积了更多的日志写到我的控制台。

此小提琴与Chrome兼容：http://jsfiddle.net/HA9B7/1/

Answer 1

当您使用 bind（）时，将返回一个新的匿名函数。如果您不保存对它的引用，它将丢失：

...ner('webkitAnimationEnd', /* lost ref. */ this.endAnimation.bind(this));

如果有人说：

var bound = this.endAnimation.bind(this);
el.addEventListener('some_event', bound);

可以做到：

el.removeEventListener('some_event', bound);

无法删除CSS动画结束的事件侦听器

1 个答案: