javascript - 使用 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.

我的代码中的问题是在没有调用onload 事件回调的Promise.all情况下激活 。linkPromise()将在“加载样式表”之前记录“加载所有样式表”。

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

标签： javascriptpromise

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

}