Javascript 如何将多个回调附加到YouTube API事件

我正在尝试将回调附加到YouTube API事件。假设一个站点上的脚本有两个独立的脚本-我的和第三方的。两者都使用JavaScript YouTube API。我需要在API就绪时运行一段代码。以下是代码示例：

第三方脚本：

// maybe load YouTube JS API
if (typeof window.YT === 'undefined') {
  var tag = document.createElement('script');
  tag.src = '//www.youtube.com/iframe_api';
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
}

// initialize when API is ready
window.onYouTubeIframeAPIReady = function () {
  // do some cool stuff here...
}

我的剧本，完全一样：

// maybe load YouTube JS API
if (typeof window.YT === 'undefined') {
  var tag = document.createElement('script');
  tag.src = '//www.youtube.com/iframe_api';
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
}

// initialize when API is ready
window.onYouTubeIframeAPIReady = function () {
  // do some cool stuff here...
}

在这种情况下，只会触发一个回调—最后一个，因为它会覆盖以前分配的回调

那么，我必须在这里使用什么编程技术来安全地连接回调？

---

谢谢。

据我所知，YouTube API没有实现符合标准的事件模型（即没有可用的

addEventListener（“YouTubeiFrameAPReady”，function（）{}）

）

一个选项是将回调存储在数组中，然后从可用的单个事件处理程序回调调用回调，如下所示：

var onYouTubeIframeAPIReadyCallbacks = [];

window.onYouTubeIframeAPIReady = function () {
    var args = arguments;

    onYouTubeIframeAPIReadyCallbacks.forEach(function (callback) {
        callback.apply(this, args)
    });
};

onYouTubeIframeAPIReadyCallbacks.push(function () {
    // ...
});

onYouTubeIframeAPIReadyCallbacks.push(function () {
    // ...
});

然后，不使用

window.onyoutubeiframeapiredy

，只需将回调按如下方式推送到该数组：

var onYouTubeIframeAPIReadyCallbacks = [];

window.onYouTubeIframeAPIReady = function () {
    var args = arguments;

    onYouTubeIframeAPIReadyCallbacks.forEach(function (callback) {
        callback.apply(this, args)
    });
};

onYouTubeIframeAPIReadyCallbacks.push(function () {
    // ...
});

onYouTubeIframeAPIReadyCallbacks.push(function () {
    // ...
});

等等

因此，当实际调用事件处理程序时，它将调用数组中的所有回调函数