why is my async funciton isn't working properly

Question

here is my code

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()

so in this code, the spanMaker isn't being run when i run my runCode functions, why? my point is for runCode functions, is to first finish the alretMaker functions (which makes all the alrets) then run the spanMaker (which assign display = none when clicked) but that doesn't seems to happen, when i do run spanMaker() after the alret is done, it does work

so how do accomplish that? thank you in advance

neither alertMaker nor spanMaker make any sense as an async function — Jaromanda X, Aug 09 '23 at 12:12
@JaromandaX what should i use instead? im so lost, i know its a bad code — Murtaza Alkabie, Aug 09 '23 at 12:14
Oh, I was saying your code makes no sense as an async function. Sure, use async, but understand what async is. Or, in other words, the fact that neither of those two functions use `await` suggests that `async` is not correct — Jaromanda X, Aug 09 '23 at 22:29

score 2 · Accepted Answer · edited Aug 09 '23 at 16:50

Building off of the answer Justina's comment referenced:

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 just returns an integer so there's nothing to await. But a promise can be awaited.

Btw, consider renaming 'alret' to 'alert'.

Carsten Massmann · Answer 2 · 2023-08-09T12:48:57.023

Here is an alternative version to accomplish your task:

const thoughts=["one","two","three","four","five"];

function makeAlert(){
  document.body.insertAdjacentHTML("beforeend",
    `<div>${thoughts.shift()} <span>x</span></div>` );
  if (thoughts.length) setTimeout(makeAlert,500);
}
document.body.addEventListener("click",ev=>{
 if (ev.target.tagName=="SPAN" && ev.target.textContent=="x") ev.target.closest("div").style.display="none"
});

makeAlert()

div span {cursor:pointer}

There is no need to venture into "async", "await" or "Promise"-land. Everything can be done by simply chaining a few function calls with a setTimeout() function.

why is my async funciton isn't working properly

2 Answers2