为什么我的异步功能无法正常工作

Question

这是我的代码

let thoughts = ['1', '2', '3', '4', '5']
i = 0;
const alretMaker = async () => {
    let interval = setInterval(function () {
        const div = document.createElement('div')
        const alret = document.createElement('span')
        document.body.append(div)
        div.append(alret)
        div.className = 'alert primary'
        alret.className = 'close'
        alret.innerText = '×'
        div.append(thoughts[i])
        i++;
        if (i >= thoughts.length) {
            clearInterval(interval)
        }
    }, 1000)
}
const spanMaker = async () => {
    const spans = document.querySelectorAll('span')
    for (let span of spans) {
        span.addEventListener('click', () => {
            span.parentElement.style.display = 'none'
        })
    }
}
const runCode = async () => {
    await alretMaker()
    await spanMaker()
}
runCode()

所以在这段代码中，当我运行 runCode 函数时，spanMaker 没有运行，为什么？ 我的观点是对于 runCode 函数，是首先完成 alretMaker 函数（这使得所有警报）然后运行 spanMaker（单击时分配 display = none），但当我运行 spanMaker() 时，这似乎不会发生警报完成后，它确实起作用了

那么如何实现这一点呢？提前谢谢你

Answer 1

基于 answer Justina 引用的评论：

async function waitUntil(condition) {
    return await new Promise(resolve => {
        const interval = setInterval(function () {
            const div = document.createElement('div')
            const alret = document.createElement('span')
            document.body.append(div)
            div.append(alret)
            div.className = 'alert primary'
            alret.className = 'close'
            alret.innerText = '×'
            div.append(thoughts[i])
            i++;
            if (i >= thoughts.length) {
                resolve()
                clearInterval(interval)
            }
        }, 1000);
    });
}

setInterval

仅返回一个整数，因此

await

没有任何内容。但承诺是可以被

await

编辑的。

顺便说一句，请考虑将全局的“alret”替换为“alert”。