javascript Promise 的多个 onload 事件

Question

我正在尝试将多个承诺链接到 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 没有在 onload 事件回调中调用 linkPromise() 就激活了。将在“加载样式表”之前记录“加载所有样式表”。

我如何正确链接承诺并在 onload 事件中激活它们并使用 Promise.all 回调来确定何时解决所有承诺？

Answer 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)
    }));

}

Answer 2

不需要事件侦听器的替代方法：

for (var link of iframe.contentWindow.document.querySelectorAll("link[rel=stylesheet]")) {
    styleSheetPromises.push(new Promise((resolve, reject) => {
        link.onload = function () {
            console.log('stylesheet loaded')
            resolve()
        }
    }))
    link.href = link.href.replace(/\?.*|$/, "?v=4")
}

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

javascript Promise 的多个 onload 事件

Multiple onload events with javascript Promise

javascript

promise