Как прикрепить несколько обратных вызовов к событию YouTube API - PullRequest
Новая
       8

Как прикрепить несколько обратных вызовов к событию YouTube API

0 голосов
/ 01 июля 2018

Я пытаюсь прикрепить обратный вызов к событию YouTube API. Допустим, на сайте есть два независимых скрипта для скриптов - мой и сторонний. Оба используют JavaScript API YouTube. Мне нужно запустить кусок кода, когда 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...
}

В этом случае будет запущен только один обратный вызов - последний, потому что он перезаписывает обратные вызовы, назначенные ранее.

Итак, какую технику программирования я должен использовать здесь, чтобы безопасно прикрепить мой обратный вызов? Спасибо.

1 Ответ

0 голосов
/ 01 июля 2018

Насколько мне известно, API YouTube не реализует совместимую со стандартами модель событий (т. Е. addEventListener("YouTubeIframeAPIReady", function () { }) недоступно).

Один из вариантов будет хранить ваши обратные вызовы в массиве, а затем просто вызывать ваши обратные вызовы из имеющегося у вас обратного вызова отдельного обработчика событий, например: 

var onYouTubeIframeAPIReadyCallbacks = [];

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

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

И затем вместо использования window.onYouTubeIframeAPIReady вы просто помещаете свои обратные вызовы в этот массив следующим образом: 

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

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

И так далее ...

Поэтому, когда обработчик события действительно вызывается, он вызывает все ваши функции обратного вызова в вашем массиве.

...