Я пытаюсь связать несколько обещаний в Promise.all([...]) и активировать каждое обещание в обратном вызове onload. Мой код:

var styleSheetPromises = []

// styles version
for (var link of iframe.contentWindow.document.querySelectorAll("link[rel=stylesheet]")) {

    //var linkPromise = new Promise((resolve) => resolve()) 
    var linkPromise = () => new Promise((resolve) => resolve())

    styleSheetPromises.push(linkPromise)

    link.onload = function () {
        console.log('stylesheet loaded')

        //linkPromise()
    }

    link.href = link.href.replace(/\?.*|$/, "?v=4")
}

Promise.all(styleSheetPromises).then((values) => {
    console.log('All stylesheets are loaded')
});

Приведенный выше код добавляет версию таблиц стилей в iframe и определяет, когда все таблицы стилей загружены в Promise.all.

Проблема в моем коде заключается в том, что Promise.all активируется без вызова linkPromise() в обратном вызове события onload. будет регистрировать «Все таблицы стилей загружены» перед «загрузкой таблицы стилей».

Как я могу правильно связать обещания и активировать их в событии onload и использовать обратный вызов Promise.all, чтобы определить, когда все обещания выполнены?

0
Ali Kleit 9 Апр 2021 в 09:44

1 ответ

Лучший ответ

Вы можете попробовать что-то вроде этого:

iframe.contentWindow.document.querySelectorAll("link[rel=stylesheet]")).forEach(link=> {
    // change to arrow function to fix closure scoping issues

    link.href = link.href.replace(/\?.*|$/, "?v=4");
    styleSheetPromises.push(new Promise((resolve, reject)=>{
        // Only resolve the promise when the stylesheet is loaded
        link.addEventListener('load', resolve)
    }));

}
1
mousetail 9 Апр 2021 в 06:58