Так, я насчитал 3 правильных ответа и действительно, в таком случае нам нужно использовать Promise.all()
На самом деле, не совсем частый гость в коде, но весьма полезный и про который вы не должны забывать. Вся инфа: https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Promise/all
Но по простому, мы в него можем закинуть массив промисов и выполнить какое-либо действие только в том случае, когда все промисы выполнились 💪
Давайте посмотрим на исходный код. Подумайте, как можно применить это знание, чтобы все сработало правильно) Код не мой, орфография остается на совести автора 😂
На самом деле, не совсем частый гость в коде, но весьма полезный и про который вы не должны забывать. Вся инфа: https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Promise/all
Но по простому, мы в него можем закинуть массив промисов и выполнить какое-либо действие только в том случае, когда все промисы выполнились 💪
Давайте посмотрим на исходный код. Подумайте, как можно применить это знание, чтобы все сработало правильно) Код не мой, орфография остается на совести автора 😂
window.addEventListener('DOMContentLoaded', () => {
const videoPlayer = document.querySelectorAll('.js-player');
if (videoPlayer.length === 0) return;
// Загружаем наши файлы для видеоплеера
includeStyle("https://cdn.plyr.io/3.6.2/plyr.css");
includeScript("https://cdn.plyr.io/3.6.2/plyr.polyfilled.js");
// Создаем массив из элементов плеера
// Вот это действие нужно выполнить после загрузки скрипта/стилей
const players = Array.from(document.querySelectorAll('.js-player')).map(p => new Plyr(p));
// Функция для добавления CSS
function includeStyle(url) {
return new Promise((resolve, reject) => {
let link = document.createElement('link');
link.type = 'text/css';
link.rel = 'stylesheet';
link.onload = function () {
resolve();
};
link.href = url;
let headScript = document.querySelector('script');
headScript.parentNode.insertBefore(link, headScript);
});
};
// Функция для добавления JS
function includeScript(src) {
return new Promise((resolve, reject) => {
let s = document.createElement('script');
s.src = src;
s.async = false;
s.type = 'text/javascript';
s.onload = arguments[1] || function () {
resolve();
};
s.onreadystatechange = function () {
if (this.readyState == 'complete' && typeof (this.onload) == 'function') {
this.onload();
}
};
document.getElementsByTagName('head')[0].appendChild(s);
return s;
});
}
});