当两个事件监听器都满足时触发回调函数

Question

我正在寻找一种优雅的方式来在满足两个加载事件侦听器时调用回调函数。目前我正在使用一个变量，它具有事件侦听器的状态并在一个时间间隔内进行检查。这是我描述的情况的一个例子：

function executeExtScript(cb, srcStyle, srcJs) {
    // 01
    let scripts = document.getElementsByTagName('script');
    let scriptExists = false;
    for (let i = scripts.length; i--;) {
        if (scripts[i].src === srcJs) scriptExists = true;
    }
    scriptExists === true ? cb() : loadScript();
    // 02
    function loadScript() {
        let loadFinish = [false, false];
        let head = document.head;
        let style = document.createElement("link");
        style.setAttribute("rel", "stylesheet");
        style.setAttribute("href", srcStyle);
        let script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = srcJs;
        script.onload = () => {loadFinish[0] = true}
        style.onload = () => {loadFinish[1] = true}
        var timer = setInterval(function() {
            if (loadFinish[0] && loadFinish[1]) {
                cb();
                clearInterval(timer);
            }
        }, 100);
        head.appendChild(style);
        head.appendChild(script);
    }
}

有没有更优雅的方法来解决这个问题 - 特别是我想阻止使用设置间隔函数，前提是如果我未能获取其中一个，它们可能运行很长时间文件

提前致谢

Answer 1

从它们中创建 Promise 并使用 Promise.all。

const promisifyLoad = (element) => new Promise((resolve, reject) => {
    element.addEventListener('load', resolve);
    element.addEventListener('error', reject);
});

function executeExtScript(cb, srcStyle, srcJs) {
    const scriptExists = [...document.querySelectorAll('script')]
        .some(script => script.src === srcJs);
    if (scriptExists) cb();
    else loadScript();

    function loadScript() {
        const { head } = document;
        const style = head.appendChild(document.createElement('link'));
        style.setAttribute("rel", "stylesheet");
        style.setAttribute("href", srcStyle);
        const script = head.appendChild(document.createElement('script'));
        script.src = srcJs;
        Promise.all([
            promisifyLoad(style),
            promisifyLoad(script)
        ])
            .then(cb)
            // .catch(handleErrors);
    }
}

当两个事件监听器都满足时触发回调函数

Trigger callback function when two event listeners are fulfilled

javascript

callback

addeventlistener