youtube-api removeEventListener not working

Question

我可以很好地添加事件。

addEventListener("onStateChange", "handleStateChange");

但当尝试删除事件时，它不会。

removeEventListener("onStateChange", "handleStateChange");

每当我暂停/播放视频时，handleStateChange仍被调用。有人遇到这种情况并找到解决方案吗？还是API有漏洞？

Answer 1

我认为问题在于YouTube API的播放器对象没有removeEventListener方法。请记住，当您调用addEventListener时，您是将其作为构建的youtube播放器对象的方法来执行，而不是使用定义为DOM元素的方法的方法（youtube API选择将其方法命名为相同的名称，以便开发人员更熟悉）。

一个在过去对其他人有效的建议是，当你处于可能需要删除事件侦听器的情况下时，你只需重新定义状态更改回调。。。类似于：

handleStateChange = function() {};

Answer 2

这对我的应用程序来说已经足够有问题了，我为YouTube播放器对象制作了一种事件发射代理。

用法（其中player是YouTube Iframe API Player实例）：

const playerEventProxy = new YouTubeEventProxy(player);
function handleStateChange(e) {
  // …
}
playerEventProxy.on('stateChange', handleStateChange);
playerEventProxy.off('stateChange', handleStateChange);

类别：

/**
 * YouTubeEventProxy
 * Quick and dirty hack around broken event handling in the YouTube Iframe API.
 * Events are renamed, dropping the "on" and lower-casing the first character.
 * Methods 'on', 'off', etc. are supported, as-provided by event-emitter.
 * See also:  https://stackoverflow.com/q/25880573/362536
 * 
 * Brad Isbell <[e-mail]>
 * License: MIT <https://opensource.org/licenses/MIT>
 */
import EventEmitter from 'event-emitter';
// From: https://developers.google.com/youtube/iframe_api_reference#Events
const ytApiEvents = [
  'onApiChange',
  'onError',
  'onPlaybackQualityChange',
  'onPlaybackRateChange',
  'onReady',
  'onStateChange'
];
export default class YouTubeEventProxy extends EventEmitter {
  constructor(player) {
    super();
    this.player = player;
    ytApiEvents.forEach((eventName) => {
      player.addEventListener(
        eventName,
        this.emit.bind(
          this,
          eventName.substr(2, 1).toLowerCase() + eventName.substr(3)
        )
      );
    });
  }
}

这是event-emitter软件包：https://www.npmjs.com/package/event-emitter