無法刪除CSS動畫結束的事件偵聽器

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