How to wait for function to stop before calling it again

Question

I have had trouble trying to get my function to finish before calling it again. This is my code now:

function TypeAnimation(str, time)
{    
    var text = document.getElementById('loading');

    for (let i = 0; i < str.length; i++) {
        let k = i;
        setTimeout(function(){
            text.innerHTML += str.charAt(i); 
        }, time * (k + 1));
    }
}

function StartGame()
{
    TypeAnimation('first line of text', 50)
    TypeAnimation('next line of text but slower', 100)
}

window.onload = StartGame;

When doing this I get the output as finrset xlitne olf itenxte of text but slower .

I have tried promises by using the following code:

function TypeAnimation(str, time)
{    
    return new Promise((resolve) => {

        var text = document.getElementById('loading');

        for (let i = 0; i < str.length; i++) {
            let k = i;
            setTimeout(function(){
                text.innerHTML += str.charAt(i); 
            }, time * (k + 1));
        }

        resolve();
    });
}

function StartGame()
{
    TypeAnimation('first line of text', 50).then(TypeAnimation('next line of text but slower', 100))
}

window.onload = StartGame;

But when I do this I still get the same result

On top of this, I also tried the same thing but with with a different StartGame()

async function StartGame()
{
    await TypeAnimation('first line of text', 50)
    TypeAnimation('next line of text but slower', 100)
}

Once again, the same issue arises and I get the same output

If it helps, this is all created with an electron js app.

Answer 1

Your code doesn't work, because you resolve the promise before timeouts even happen

The approach like this will make it easier

 async function TypeAnimation(str, time) { const text = document.getElementById('loading'); for (let i = 0; i < str.length; i++) { text.innerHTML += str.charAt(i); await wait(time) } } async function StartGame() { await TypeAnimation('first line of text', 50) await TypeAnimation('next line of text but slower', 100) } StartGame() function wait(time) { return new Promise(r => setTimeout(r, time)) }

 <span id="loading"></span>