Async functions inside setInterval giving Syntax Error in HTML

Question

Good morning/evening guys, I’m having a really boring problem, I’m creating a website for a school biology project, about cells. On this site I have to make a loop that performs an action, wait X seconds and perform another action, wait more Y seconds and return to the beginning of the loop. I found some code using async functions but when I try to apply them the browser runs once and returns me an error Uncaught Syntaxerror: Unexpected Identifier line number 1 of html (every 2s it throws me dnv error). JS:

    function first(){
    setTimeout(() => {
    console.log('first')
    }, 1000);
    }

    function second(){
    setTimeout(() => {
    console.log('second')
    }, 1000);

    }

    let run = async ()=>{
    await first();
    await second();
    }

    setInterval(run(), 1000);

When I comment on that part, the error goes away. I don’t know much about async and await, but I’ve tried everything to do that and so far this is the most promising method. I hope you understand what I mean, thank you very much and possibly good night.

Answer 1

The error is happening because you are not passing a function to the setInterval.

setInterval receives two parameters; a function, and the time in milliseconds to perform this function. Now see what you are doing here:

setInterval(run(), 1000);

run is a function, but when using run() you are calling the function and passing its return as parameter to the setInterval. However run() there’s no return, it’s undefined, your setInterval is being invoked as setInterval(undefined, 1000), and that’s a mistake.

You could invoke his setInterval as setInterval(run, 1000), or you could also declare an anonymous function, just as you did on setTimeout:

setInterval(() => {
    run();
}, 1000);

This would solve the error declared in the question. There is one more error in this code related to await

---

await serves to await the resolution of a Promise. Its function first and second do not emit any kind of signal to signal that they have finished executing, the await don’t know what he should expect.

You need to wrap these functions in a file. By invoking the resolve of the President, you will be sending this signal that the await need to keep running.

function first() {
    return new Promise(resolve => {
        setTimeout(() => { 
            console.log('first') 
            resolve()
        }, 1000)
    })
}

function second() {
    return new Promise(resolve => {
        setTimeout(() => { 
            console.log('second') 
            resolve()
        }, 1000)
    })
}

Now yes, refactoring all the code you would have:

function first() {
    return new Promise(resolve => {
        setTimeout(() => { 
            console.log('first') 
            resolve()
        }, 1000)
    })
}

function second() {
    return new Promise(resolve => {
        setTimeout(() => { 
            console.log('second') 
            resolve()
        }, 1000)
    })
}

async function run() {
    // loop infinito
    while (true) {
        await first();
        await second();
    }
}

// ironicamente, você nem precisava de um setInterval
run();