如何在再次调用之前等待 function 停止

Question

在再次调用 function 之前，我无法尝试完成它。 现在这是我的代码：

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;

这样做时，我得到 output 作为finrset xlitne olf itenxte of text but slower 。

我已经尝试使用以下代码承诺：

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;

但是当我这样做时，我仍然得到相同的结果

最重要的是，我也尝试了同样的事情，但使用了不同的 StartGame()

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

同样的问题再次出现，我得到相同的 output

如果有帮助，这都是用 electron js 应用程序创建的。

Answer 1

您的代码不起作用，因为您在超时发生之前就解决了 promise

这样的方法会让事情变得更容易

 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>